Vanilla JS：仅显示同一父组中的下一个元素答案

【问题标题】：Vanilla JS: Reveal only the next element at the same parent groupVanilla JS：仅显示同一父组中的下一个元素
【发布时间】：2019-05-03 13:00:29
【问题描述】：

我正在尝试创建几个标签 - 带有循环。然后，当您单击作为跨度的选项卡名称时，它会展开（或隐藏）位于其下方的下一个跨度。问题是该功能仅在循环中创建的第一个选项卡中有效，如果您单击第二个/第三个等选项卡 - 该功能仅在第一个选项卡处触发。

尝试使用 querySelector 和 nextElementSibling 没有任何成功。

仅使用 ejs 模板、express 和 vanilla javascript。

这是循环/标签。

<div>   
    <% listedProducts.forEach(function(product) { %>
        <div class="col">
            <span id="info" class="b-d"  onclick="hideReveal()">
                <%= product.name %>
            </span>
            <span>
                <img src="<%= product.logo %>" alt="">
                <p class="r-d"><%= product.supplierCompany %></p>
                <p class="r-d"><%= product.dateListed %></p>
                <p class="r-d"><%= product.dateApproved %></p>
                <p class="r-d"><%= product.supplierName %></p>
            </span>
        </div>
    <% }); %>
</div>

和功能

function hideReveal() {
    var tab = document.getElementById("info");
    if (tab.style.display === "none") {
        tab.style.display = "block";
    } else {
        tab.style.display = "none";
    }
}

需要一点帮助，请。谢谢你，周末愉快。

【问题讨论】：

您的所有跨度项目似乎都具有相同的 id，并且您的 getElementById 调用仅返回第一个。您应该为每个跨度使用唯一的 id，并为您的 hideReveal 方法添加一个参数以在您的 DOM 中找到适当的跨度元素
您对所有跨度标记使用相同的 id，因此每当单击跨度时，它都会获取具有该 id 的第一个元素，您需要使用 class 而不是 id在多个元素上使用它。

标签： javascript loops dom parent-child ejs

【解决方案1】：

在您的点击处理程序中，传递一个事件参数，例如，function clickHandler(evt)，然后说var thisTab = evt.target.id。这假设您在选项卡上有一个 id 属性。然后就可以切换thisTab的firstElementChild的开/关类了

【讨论】：