在动态元素的按钮点击时，在Each Loop中不隐藏相关数据。

Question

我有一个由Node填充的表格，每一行代表一个文档。有太多重复的数据，所以我希望其中的一些数据被隐藏，然后在点击按钮时取消隐藏。

在我的pug模板中的For Each循环中，我添加了一个图标，这样当你点击它时，隐藏的内容就应该被显示出来。

tbody
    each output in project.outputs
         tr
           td= output.title
              svg.report__icon.dropbtn
                 table.dropdown-content
                    - for (let i=0; i<5; i++)
                       output.repetitive-data[i]

然后我用js写了一个onclick事件，像这样。

document.querySelectorAll('.dropbtn').forEach(item => {
        item.addEventListener('click', (e) => {
            document.querySelector('.dropdown-content').classList.toggle('show')
        })
    })

然而，虽然这确实允许点击每个图标，但无论点击哪个图标，它都只会取消隐藏表格第一行的数据，这确实是有道理的，因为 "querySelector "会切换它找到的第一个有该类的元素。

我如何为正确的rowelement切换正确的CSS showhide属性？我需要一个循环中的循环吗？

Answer 1

querySelector 也可以在常规DOM元素上调用，在这种情况下，它将只限制在该元素内搜索

document.querySelectorAll('.dropbtn').forEach(item => {
    item.addEventListener('click', (e) => {
        e.currentTarget.parentNode.querySelector('.dropdown-content').classList.toggle('show')
    })
})