将Foreach内部的单击事件中的信息传递给变量

Question

我想得到"indx"；由for each生成，以将其存储在一个变量中，并在另一个操作中全局使用。辅助

<>
let table = ``;

await viewData.forEach((category, indx) => {
table +=    `
<div >
<li  key="${indx}" onclick="(console.log(${indx}))" class="list-group-item"  > 
${category.name}
</li></div>
`
});
evento.innerHTML = table;
`<div class="category">
<ul class="list-group"">${table}</ul>
</div>
`
</>

Answer 1

当您动态生成html时，我们无法将对象从生成逻辑直接传递到运行时，但是我们可以轻松地将传递标识符或索引值的回调连接到我们的javascript函数，这些函数在运行时可以使用该值查找原始对象引用。

此示例扩展了原始帖子并使用索引:

let table = ``;
let viewData = [{name: 'Item1', Id: 1},{name: 'Item2', Id: 2}];
viewData.forEach((category, indx) => {
table +=    `
<div >
<li  key="${indx}" onclick="(categoryClicked(${indx}))" class="list-group-item"  > 
${category.name}
</li></div>
`
});

var evento = document.getElementById('evento');
evento.innerHTML = table;
`<div class="category">
<ul class="list-group"">${table}</ul>
</div>
`;

var categoryClicked = function (indx) {
// passed in index
console.log(indx);

// lookup the category from the viewData so we can access other properties
let category = viewData[indx];
console.log(category);
}

通常不建议使用索引，索引是一个易失性链接，很容易受到对数组源的排序、过滤或其他变异操作的影响。如果您使用数组中元素的标识符，您的解决方案将更加稳健：fidd

let table = ``;
let viewData = [{name: 'Item1', Id: 1},{name: 'Item2', Id: 2}];
viewData.forEach((category) => {
table +=    `
<div >
<li  key="${category.Id}" onclick="(categoryClicked(${category.Id}))" class="list-group-item"  > 
${category.name}
</li></div>
`
});

var evento = document.getElementById('evento');
evento.innerHTML = table;
`<div class="category">
<ul class="list-group"">${table}</ul>
</div>
`;

var categoryClicked = function (id) {
// passed in index
console.log(id);

// lookup the category from the viewData so we can access other properties
let category = viewData.find(cat => cat.Id === id);
console.log(category);
}

如果你发现自己大量生成这样的代码，你应该过渡到像Handlebars.js这样的javascript模板框架，或者像AngularJS/RectJS/VuewJS 这样更健壮的框架