javascript - jQuery 按类过滤 div

Question

我正在尝试按类过滤 div，但我遇到了一些麻烦。出于某种原因，如果按下任何按钮，一切都会消失。我已经对此进行了一段时间的故障排除，但我不明白为什么会这样。 CodePen 是 here我的尝试如下:

HTML:

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a &amp; b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>

CSS:

div {
  background: #eee;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
}
.active {
  color: red;
}

jQuery:

$( document ).ready(function() {

  $("#all").click(function() {
    $("div").fadeIn(500);
    $("#all").addClass("active");
    $(":not(#all)").removeClass("active");
  });
  $("#a").click(function() {
    $(".a").fadeIn(500);
    $(":not(.a)").fadeOut(0);
    $("#a").addClass("active");
    $(":not(#a)").removeClass("active");
  });
  $("#b").click(function() {
    $(".b").fadeIn(500);
    $(":not(.b)").fadeOut(0);
    $("#b").addClass("active");
    $(":not(#b)").removeClass("active");
  });
  $("#c").click(function() {
    $(".c").fadeIn(500);
    $(":not(.c)").fadeOut(0);
    $("#c").addClass("active");
    $(":not(#c)").removeClass("active");
  });
  $("#d").click(function() {
    $(".d").fadeIn(500);
    $(":not(.d)").fadeOut(0);
    $("#d").addClass("active");
    $(":not(#d)").removeClass("active");
  });

});

Answer 1

这是因为选择器 $(":not(.b)") 选择了所有元素并将其隐藏，除了 .b 将包含 >body 元素也是。

您需要使用更具体的选择器，一种选择是使用像这样的容器元素

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#ct > div').show();
  } else {
    var $el = $('.' + this.id).show();
    $('#ct > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
  <div class="a b">a &amp; b</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

---

使用像元素选择器 div 这样的通用选择器也可能不起作用，因为它可能会定位其他不相关的元素，因此另一种选择是对所有需要定位的元素使用通用类。

var $items = $('.item');
var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $items.show();
  } else {
    var $el = $('.' + this.id).show();
    $items.not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a &amp; b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>

注意:同样如您所见，无需为每个按钮编写单独的点击处理程序 - 假定按钮的 id 和您要查找的类相同。