-6ren">
gpt4 book ai didi

javascript - Rails 循环 : Show and hide element by id

转载 作者:行者123 更新时间:2023-11-30 19:51:29 24 4
gpt4 key购买 nike

我正在使用以下代码遍历类别和子类别"

<ul>
<% @categories.each do |category| %>
<li onclick="showHide()"> <%= category.name %>
<% unless category.children.empty? %>
<ul id="categories" style="display:none;">
<% category.children.each do |subcategory| %>
<li><%= link_to "#{subcategory.name}", search_path(:search => subcategory.id) %></li>
<% end %>
</ul>
<% end %>
</li>
<% end %>
</ul>

我想点击每个类别,然后会出现子类别:

function showHide() {
var x = document.getElementById("categories");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

但出于某种原因,当我单击第一个打开的类别而不是我正在单击的特定类别时。关于如何解决此问题的任何想法?

最佳答案

您的问题是范围界定:您没有为 document.getElementById("categories"); 提供上下文,这意味着它只是选择页面上具有 id< 的第一个元素“类别”。

当我们在这里时,id 对于一个页面应该是唯一的,因此您最好将多次呈现的任何内容切换为使用 class

要使用单击事件的范围,您可以将 event 传递给函数,我们可以使用它来查找正在切换的 li

所以在你的 html 中:

<li onclick="showHide(event)">

还有你的函数:

function showHide(e) {
var parentCategory = e.currentTarget
var categoryList = parentCategory.querySelector(".categories"); // << assuming you switch to using classes
if(!categoryList) { return }
if (categoryList.style.display === "none") {
categoryList.style.display = "block";
} else {
categoryList.style.display = "none";
}
}

这样,您将在单击的 li 中查找类别,您应该会按预期看到此切换。

如果你使用的是 es6,你也可以使用三元来简化它:

function showHide(e) {
let categoryList = e.currentTarget.querySelector(".categories");
if(!categoryList) { return }

categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
}

如果您有任何问题,请告诉我您的进展情况。

关于javascript - Rails 循环 : Show and hide element by id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54418638/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com