使用事件委托区分并隐藏DOM节点

"使用事件委托区分并隐藏DOM节点"\n\n本文介绍如何使用事件委托的方式，区分点击的DOM节点并隐藏对应内容，解决点击多个class相同的节点时，只能影响第一个节点的问题。\n\n原始代码：\n\njavascript\nListData.listArr.forEach(item => {\n num++\n let outer = ''\n let Innerlayer = ''\n item.secondary.forEach(data => {\n Innerlayer = Innerlayer + `<div class="leibie"><span class="danwei">${data.date}</span><span class="height"></span><span class="danweis">${data.value} ${data.unit}</span></div>`\n })\n outer = `<div class="toper"><div class="jianbian" data="${num}">${item.name}</div><div class="Innerlayer" data="${num}">${Innerlayer}</div></div>`\n $('#content').append(outer)\n})\n\n\n问题描述：\n\n我根据这个代码生成了很多class相同的DOM节点，现在我想点击每个jianbian隐藏他下面的Innerlayer，但我发现，如果使用以下代码，只会影响第一个jianbian的内容：\n\njavascript\nlet num = $(this).attr('data');\n$('.Innerlayer[data="' + num + '"]').toggle();\n\n\n解决方案：\n\n你可以尝试使用事件委托的方式来处理点击事件，这样可以根据点击的具体元素来找到对应的Innerlayer。修改代码如下：\n\njavascript\n$('#content').on('click', '.jianbian', function() {\n let num = $(this).attr('data');\n $('.Innerlayer[data="' + num + '"]').toggle();\n});\n\n\n这样，无论点击哪个jianbian，都能找到对应的Innerlayer并进行隐藏/显示操作。\n\n总结：\n\n使用事件委托可以有效地处理多个相同class的节点的点击事件，避免重复绑定事件，提高代码效率。