Javascript 运行循环时传递函数

我从html5开始，不确定我在这里是否做错了什么

我试图实现的是创建一个项目组合，当选择一个项目时，将所选项目传递给一个函数进行处理

我在这里放了一个简单的JSFIDLE

data=JSON.parse（'{“error”：false，“items”：[{“id”：1，“name”：“John”}，{“id”：2，“name”：“Jordan”}]}）；
jQuery.each（data.items，函数（counter，item）{
//控制台日志（项目）；
h='
'；
$（'投资组合'）。追加（h）；
});
函数generateCallBack（argItem）{
返回函数（）{
所选项目（argItem）；
};
};
已选择功能项（argItem）{
//console.log（argItem.name）；
警报（argItem.name）；
};

---

提前感谢。

我建议使用创建HTML，并使用元素存储任意值

另外，学习动态生成元素时使用委托事件方法

一般语法

您的解决方案的代码片段

$（函数（）{
var data=JSON.parse（{“error”：false，“items”：[{“id”：1，“name”：“John”}，{“id”：2，“name”：“Jordan”}]}）；
jQuery.each（data.items，函数（counter，item）{
//控制台日志（项目）；
$('', {
href:“#”，
text:item.name，
“类”：“myClass”
})
.数据（'项目'，项目）
.add（“
”）
.appendTo（“#公文包”）；
});
$（“#公文包”）。在（'click'，'a.myClass'，function（）上{
console.log（$（this.data（'item'））；
})
});



您可能希望执行类似操作（如果出现问题，可以将箭头函数更改为普通函数）：

const data=JSON.parse（'{“error”：false，“items”：[{“id”：1，“name”：“John”}，{“id”：2，“name”：“Jordan”}]}）；
常量数组=data.items；
常量长度=array.length；
让字符串=“”；
data.items.map（item=>{
字符串+='
'；
});
const portfolio=document.getElementById（'portfolio'）；
portfolio.innerHTML+=字符串；
portfolio.addEventListener（'click'，函数（事件）{
如果（event.target.tagName！=“A”）返回；
设i=-1；
而（++i<长度）{
if（数组[i].name==event.target.textContent）{
return alert（JSON.stringify（array[i].name））；//return结束函数，从而结束循环。
}
}
});

纯Javascript。没有jQuery废话。
html5标签是干什么的？我不理解标签的问题。我既没有看到任何html5，也没有看到问题本身。它与javascript有关，而不是HTML5。我按照您的建议浏览了活动代表团，似乎理解了其中的一些内容。但是我不明白你添加标签的方式。我以为.data（'item'，item）会向标记添加一个数据项属性，但在编译的html中找不到它。那么这东西到底是如何工作的呢？还有，如何为每个循环条目添加多个这样的标记？例如，一个带有标记的图像。@TheVolvingMe，
.data（）
使用缓存存储元素中的任意数据。在上面的示例中，我使用了
.add（）
来添加
br
类似地，您可以添加图像标记，如
$（“”，{href:'#'，text:item.name，'class'：'myClass'}）。数据（'item'，item.）。添加（'
'）。添加($（'非常感谢。我需要使用html布局。这个解决方案看起来非常简单。但是，在事件侦听器上，我们再次循环所有项目以找到指定的项目。如果我们有100个项目，它会有性能影响吗？100个项目没有，但你是对的。这很容易解决例如，通过vanilla while循环进行循环，并在找到所需元素后执行break。我将在一秒钟内更新我的答案以显示这一点。我喜欢这个，好答案：）
data = JSON.parse('{"error":false,"items":[{"id":1,"name":"John"},{"id":2,"name":"Jordan"}]}');

jQuery.each(data.items, function(counter, item) {
  //console.log(item);
  h = '<a href="#" onclick="' + generateCallBack(item) + ';">' + item.name + '</a></br>';
  $('#portfolio').append(h);
});

function generateCallBack(argItem) {
    return function() {
      itemSelected(argItem);
    };
};

function itemSelected(argItem) {
  //console.log(argItem.name);
  alert(argItem.name);
};

$(staticParentContainer).on('event','selector',callback_function)

const data = JSON.parse('{"error":false,"items":[{"id":1,"name":"John"},{"id":2,"name":"Jordan"}]}');
const array = data.items;
const length = array.length;

let string = '';
data.items.map(item => {
    string += '<a href="#">' + item.name + '</a></br>';
});

const portfolio = document.getElementById('portfolio');
portfolio.innerHTML += string;

portfolio.addEventListener('click', function(event) {
    if(event.target.tagName !== 'A') return;

    let i = -1;
    while(++i < length) {
        if(array[i].name === event.target.textContent) {
            return alert(JSON.stringify(array[i].name)); // return ends the function and thus the loop too.
        }
    }
});