javascript - 如何从具有append的li元素获取对象参数

我有简单的“数据”，包括 li 标签和数据。然后我将其附加到“ul”标签中。我希望每个 li 标签都可以单击将其一些数据传递到 txtBox。

我使用“for 循环”来使字符串值附加到类似..

datata = '<li onclick = "getset('+ data[i] +')></li>">';

在函数 getset 中，我希望点击发送 1 个对象，例如...

{
   id: 1,
   name: "namename1",
   lname: "imlname1",
   job: "artist",
   ages: "17"
}

然后。可以在对象中使用值，例如... getData.name，getData.job，...

function getset(getData){
 getData.name = document.getElementById("txtBox").value;
}

但是..我得到的只是错误'未捕获的语法错误:意外的标识符'

为什么会发生这种事？谢谢

window.onload = function () {
            data = [
                {
                    id: 1,
                    name: "namename1",
                    lname: "imlname1",
                    job: "artist",
                    ages: "17"
                }, {
                    id: 2,
                    name: "namename2",
                    lname: "imlname2",
                    job: "artist",
                    ages: "25"
                }, {
                    id: 3,
                    name: "namename3",
                    lname: "imlname3",
                    job: "artist",
                    ages: "15"
                }, {
                    id: 4,
                    name: "namename4",
                    lname: "imlname4",
                    job: "artist",
                    ages: "18"
                }, {
                    id: 5,
                    name: "namename5",
                    lname: "imlname5",
                    job: "artist",
                    ages: "27"
                }
            ];
            var datata = '';
            for (let i = 0; i < data.length; i++) {
                datata += '<li onclick="getset(' + data[i] + '  )">' + data[i].name + '</li>';
            }
     
            $("ul").append(datata);
        }

        function getset(data) {
            console.log("1");
            console.log(data);
        }

li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block;
            /* Make it into a block element to fill the whole list */
            position: relative;
}

li:hover {
            background-color: #adadad;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   
</head>

<body>
    

    <input type="search" id="txtBox">
    <ul id="ulTag">

    </ul>

</body>

</html>

最后一个结果我将创建文本框来从“数据”变量中搜索数据，然后单击以获取文本框完整数据。

最佳答案

主要问题是因为您尝试将对象附加到字符串，因此类型被强制，在这种情况下，您需要的数据会丢失。

一种解决方法是创建一个要附加的 jQuery 对象数组，每个对象都将其相关对象存储在元素上的 data 属性中，可以轻松地从委托(delegate)事件处理程序如下所示:

var datata = data.map(function(o) {
  return $('<li />', { text: o.name }).data('object', o);
}); 

$("ul").append(datata).on('click', 'li', function() {
  console.log($(this).data('object'));
});

$(function() {
  var data = [{
    id: 1,
    name: "namename1",
    lname: "imlname1",
    job: "artist",
    ages: "17"
  }, {
    id: 2,
    name: "namename2",
    lname: "imlname2",
    job: "artist",
    ages: "25"
  }, {
    id: 3,
    name: "namename3",
    lname: "imlname3",
    job: "artist",
    ages: "15"
  }];

  var datata = data.map(function(o) {
    return $('<li />', { text: o.name }).data('object', o);
  }); 
  
  $("ul").append(datata).on('click', 'li', function() {
    console.log($(this).data('object'));
  });  
});

li {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  /* Make it into a block element to fill the whole list */
  position: relative;
}

li:hover {
  background-color: #adadad;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="search" id="txtBox">
<ul id="ulTag"></ul>

关于javascript - 如何从具有append的li元素获取对象参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56524465/

javascript - 如何从具有append的li元素获取对象参数

上一篇：javascript - 如何调用多个函数之一 - JavaScript？

下一篇：javascript - 如何用JS选择一个选择框的选项值？