Question

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

<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";
    }
}

但是由于某种原因，当我单击任何类别时，第一个类别打开，而不是我要单击的特定类别。有关如何解决此问题的任何想法？

Answer 1

您的问题正在确定范围：您没有为document.getElementById("categories");提供上下文，这意味着它只是选择页面上带有id'类别'的第一个元素。

虽然我们在这里，id对于页面应该是唯一的，所以最好将多次渲染的内容切换为使用class。

要将作用域用于click事件，可以将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"
}

如果您有任何疑问，请让我知道您的生活。

Rails循环：按ID

1 个答案: