javascript - 隐藏没有类别的元素

Question

如果子 sub-list 没有事件 类。如果 sub-list 属于选定的主要类别(单击 Main1 或 Main 2)，则它接收 active 类)

我尝试了这段代码但没有成功:

var item = $(".sub-list");

if (!$(item).hasClass("active")) {
  $(item)
    .closest(".sub-item")
    .hide();
} else {
  $(item)
    .closest(".sub-item")
    .show();
}

在代码片段中，sub-items 不会hide(); 即使 sub-list 接收到 活跃的类。如何隐藏所有具有 active 类的子项？

$(document).ready(function() {
  function toggleSubcatDiv(input, showTypeList) {
    var $list = $(input).closest(".post-item");
    $list
      .find(".sub-list")
      .filter(".active")
      .removeClass("active")
      .end()
      .filter('[data-for="' + $(input).attr("name") + '"]')
      .addClass("active");
  }
  $(this).on("click click.init", ".cat-item", function(e) {
    var $menu = $(this).closest(".cat-dropdown");
    var item = $(".sub-list");
    if (!$(item).hasClass("active")) {
      $(item)
        .closest(".sub-item")
        .hide();
    } else {
      $(item)
        .closest(".sub-item")
        .show();
    }
    $menu
      .find(".title")
      .children(":checkbox")
      .prop("checked", true)
      .next("span")
      .text($(this).text())
      .css("color", this.style.color);
    toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
  });
});

.sub-item {
  min-height: 10px
}

.sub-item input {
  display: none
}

.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}

.sub-list:not(.active) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="edit">
      <label class="title">
<input type="checkbox"><span> Choose...</span>
</label>
      <div class="cat-dropdown-menu">
        <div class="cat-list" id="category">
          <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
          <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
        </div>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha" fill="blue" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha2" fill="blue" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha3" fill="red" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha4" fill="red" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="plane">
<input class="sub-input" id="plane" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha5" fill="red" d="M20.061 15.32v-.868l-6.14-4.27.14-3.993c-.071-2.093-1.417-2.427-1.614-2.427-.196 0-1.526.44-1.507 2.427l.14 3.992-6.141 4.271v.868l6.28-1.167.16 4.568-2.294 1.595v.392h2.493a1.07 1.07 0 0 0 1.846 0h2.49v-.392l-2.292-1.595.16-4.568 6.28 1.167z"/></svg><br><b>Main 2C</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

问题是由 $(".sub-list") 返回多个元素引起的。

因此，当您使用 .hasClass() 进行测试时，您总是得到一个 true，因为至少返回的一个元素具有该类。

您必须运行 .each() 循环来分别测试所有元素:

var item = $(".sub-list");

item.each(function(){
  if (!$(this).hasClass("active")) {
    $(this)
      .closest(".sub-item")
      .hide();
  } else {
    $(this)
      .closest(".sub-item")
      .show();
  }
});

我还为单选按钮添加了一个快速修复...要取消选中另一个:

$(".cat-item").not(this).find("input").prop("checked",false);

您的代码段已通过上述更改修复:

$(document).ready(function() {
  function toggleSubcatDiv(input, showTypeList) {
    var $list = $(input).closest(".post-item");
    $list
      .find(".sub-list")
      .filter(".active")
      .removeClass("active")
      .end()
      .filter('[data-for="' + $(input).attr("name") + '"]')
      .addClass("active");
  }
  $(this).on("click click.init", ".cat-item", function(e) {
    $(".cat-item").not(this).find("input").prop("checked",false);
    
    var $menu = $(this).closest(".cat-dropdown");
    var item = $(".sub-list");
    
    item.each(function(){
      if (!$(this).hasClass("active")) {
        $(this)
          .closest(".sub-item")
          .hide();
      } else {
        $(this)
          .closest(".sub-item")
          .show();
      }
    });
    $menu
      .find(".title")
      .children(":checkbox")
      .prop("checked", true)
      .next("span")
      .text($(this).text())
      .css("color", this.style.color);
    toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
  });
});

.sub-item {
  min-height: 10px
}

.sub-item input {
  display: none
}

.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}

.sub-list:not(.active) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="edit">
      <label class="title">
<input type="checkbox"><span> Choose...</span>
</label>
      <div class="cat-dropdown-menu">
        <div class="cat-list" id="category">
          <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
          <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
        </div>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha" fill="blue" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha2" fill="blue" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha3" fill="red" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha4" fill="red" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="plane">
<input class="sub-input" id="plane" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="patha5" fill="red" d="M20.061 15.32v-.868l-6.14-4.27.14-3.993c-.071-2.093-1.417-2.427-1.614-2.427-.196 0-1.526.44-1.507 2.427l.14 3.992-6.141 4.271v.868l6.28-1.167.16 4.568-2.294 1.595v.392h2.493a1.07 1.07 0 0 0 1.846 0h2.49v-.392l-2.292-1.595.16-4.568 6.28 1.167z"/></svg><br><b>Main 2C</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>