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元素。

您需要使用更具体的选择器，一个选项是使用像

这样的容器元素

＆＃13;

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');
})

＆＃13;

.active {
  color: green;
}

＆＃13;

<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>

＆＃13;

使用像元素选择器div这样的公共选择器也可能无法正常工作，因为它可以定位其他非相关元素，因此另一个选项是对需要定位的所有元素使用公共类。

＆＃13;

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');
})

＆＃13;

.active {
  color: green;
}

＆＃13;

<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>

＆＃13;

注意：正如您所看到的，不需要为每个按钮编写单独的点击处理程序 - 假设按钮的id和您要查找的类是相同的。

Answer 2

问题在于这个选择器，例如：

:not(.d)

...将选择不具有课程.d的所有内容，包括正文和所有按钮等。限制更多内容，例如：

div:not(.d)

......应该有效。请参阅我的修复：http://codepen.io/anon/pen/cyhIK

Answer 3

根据班级名称对表格内容进行排序可能会对某人有所帮助：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
    return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;    
}).appendTo('table tbody');

根据类名对表行值进行排序：

<table>
    <thead>
        <th>A column</th>
    </thead>
    <tbody>
        <tr>
            <td class="x">A</td>
        </tr>
        <tr>
            <td class="c">B</td>
        </tr>
        <tr>
            <td class="">C</td>
        </tr>
    </tbody>
</table>

jQuery Filter divs By Class

3 个答案: