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

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

我使用“for循环”使字符串值像

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

那么。可以在对象中使用值，如。。。getData.name，getData.job

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

但是。。我得到的只是错误“uncaughtsyntaxerror:意外标识符”

为什么会这样？？多谢各位

window.onload=函数{ 数据=[ { id:1， 姓名：姓名1， 名称：imlname1， 工作：艺术家， 年龄：17 }, { id:2， 姓名：姓名2， 名称：imlname2， 工作：艺术家， 年龄：25 }, { id:3， 姓名：姓名3， 名称：imlname3， 工作：艺术家， 年龄：15 }, { id:4， 姓名：姓名4， 名称：imlname4， 工作：艺术家， 年龄：18 }, { id:5， 姓名：姓名5， 名称：imlname5， 工作：艺术家， 年龄：27 } ]; var-datata=； 对于let i=0；i您将作为对象的参数进行传递。Html不支持将作为参数对象。我修正了你的代码：

您需要传递数据[i]。id不是数据[i]

window.onload=函数{ 数据=[ { id:1， 姓名：姓名1， 名称：imlname1， 工作：艺术家， 年龄：17 }, { id:2， 姓名：姓名2， 名称：imlname2， 工作：艺术家， 年龄：25 }, { id:3， 姓名：姓名3， 名称：imlname3， 工作：艺术家， 年龄：15 }, { id:4， 姓名：姓名4， 名称：imlname4， 工作：艺术家， 年龄：18 }, { id:5， 姓名：姓名5， 名称：imlname5， 工作：艺术家， 年龄：27 } ]; var-datata=； 对于let i=0；ie.id==id； console.log'Selection:'，match； } 李{ 边框：1px实心ddd； 页边顶部：-1px； /*防止双重边界*/ 背景色：f6f6f6； 填充：12px； 文字装饰：无； 字号：18px； 颜色：黑色； 显示：块； /*使其成为块元素以填充整个列表*/ 位置：相对位置； } 李：悬停{ 背景色：adadad； } 测验 应该是：

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

---

主要问题是，您试图将对象附加到字符串，因此类型被强制，在本例中，所需的数据丢失

一种解决方法是创建一个要追加的jQuery对象数组，每个对象都将其相关对象存储在元素的数据属性中，可以通过委托事件处理程序轻松访问这些对象，如下所示：

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'));
}); 

---

您可以使用模板文本，并且需要使用JSON.stringify将对象作为参数传递

datata += `<li onclick=getset(${JSON.stringify(data[i])})>${data[i].name}</li>`;

测验

---

谢谢大家的回答，谢谢罗里。我从你那里知道了

我明白。。如果使用

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

不是

getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"});

这也是工作，但我还是不确定这是不是最好的

---

正确的方法。

Rory介绍了代码不起作用的原因，以及jQuery的解决方法。这里有另一个解决办法

1将每个对象属性作为数据属性附加到每个列表项

2将单个事件侦听器添加到组件中，而不是每个列表项添加一个事件侦听器，以侦听其子项在DOM中冒泡时发出的事件

const data=[{id:1，name:name1，lname:imlname1，job:artist，ages:17}，{id:2，name:name2，lname:imlname2，job:artist，ages:25}，{id:3，name:name3，lname:imlname3，job:artist，ages:15}，{id:4，name:name4，lname:imlname4，job:artist，ages:18}，{id:5，name:imlname5，job:27}； 功能手柄{ //从事件目标中解构数据集 const{target:{dataset:{name，job，ages}}=e； console.logname、作业、年龄； } //“映射”数据并创建列表项数组 const lis=data.mapobj=>{ 回来 `${obj.name}` ; }; //抓取'ul'元素，将列表项添加到其中，然后添加 //用于侦听单击事件的事件侦听器 const ul=document.querySelector'ulTag'； ul.innerHTML=lis.join； ul.addEventListener'click'，handleClick，false；

---

正确，但这并不能解决OPs问题。@freedomn-m实际上是这样的。请看大图。在函数getset中，我希望单击发送1个对象-好吧，这是您的问题。Hi@savecost请在创建动态li的位置使用数据[I].id而不是数据[I]。谢谢。这是一个很糟糕的做法。@savecost完成了这个例子

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'));
}); 

datata += `<li onclick=getset(${JSON.stringify(data[i])})>${data[i].name}</li>`;

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

<li onclick = "getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"})></li>">';

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

getset(data[0]);

getset({id: 1,name: "namename1",lname: "imlname1",job: "artist",ages: "17"});