javascript – 添加类到所有元素与一个类

我有点新的javascript和jquery,我有一些麻烦做我想要的“好”的方式.

我有一个这样的HTML网页:

<div class="list-group">
   <a href="#all" id="category-all" class="list-group-item active">All</a>
   <a href="#" id="category-0" class="list-group-item">Foo</a>
   <a href="#" id="category-1" class="list-group-item">Bar</a>
   <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
   <div class="category-0">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
</div>

我想添加一些“过滤器”,如果您点击某个类别链接,其他类别的所有元素都将消失.
我设法通过添加一个类到我的css调用invis与“display:none”,然后写道:

$( ".list-group-item" ).click(function() {
  $(".list-group-item").removeClass('active');
  $( this ).toggleClass("active");
  var test = "." + event.target.id;
  $(".category-0").addClass('invis');
  $(".category-1").addClass('invis');
  $(".category-2").addClass('invis');
  if (test == ".category-0")
    $(".category-0").removeClass('invis');
  if (test == ".category-1")
    $(".category-1").removeClass('invis');
  if (test == ".category-2")
    $(".category-2").removeClass('invis');
  if (test == ".category-all") {
    $(".category-0").removeClass('invis');
    $(".category-1").removeClass('invis');
    $(".category-2").removeClass('invis');
  }
});

这样做,但我想找到一种“更干净”的做法.如何改善?

谢谢 !

使用jQuery执行此操作的一种方法是在单击过滤器控件时隐藏所有< div> s,然后取消隐藏要显示的特定的< div>.

这样你不需要额外的invis类.

您会注意到下面的代码中的“^ =”符号,它只是一个字面意思是“开始”的选择器.

$('a[id^="category"]').click(function() {
// when an <a> element is click THAT has an ID that starts with "category" ...

  $('div[class^="category"]').hide();
  // hide every <div> that's ID starts with "category" ...
  $('div.' + this.id).show();
  // re-show every <div> that's CLASS matches the original <a>'s ID ...
});
$('a[id="show-all"]').click(function() {
  // if the "all" is clicked, show them ALL again.
  
  $('div[class^="category"]').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a href="#all" id="show-all" class="list-group-item active">All</a>
  <a href="#" id="category-0" class="list-group-item">Foo</a>
  <a href="#" id="category-1" class="list-group-item">Bar</a>
  <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
  <div class="category-0">Foo</div>
  <div class="category-1">Bar</div>
  <div class="category-1">Bar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
</div>
https://stackoverflow.com/questions/27516750/add-class-to-all-elements-with-a-certain-class

转载注明原文:javascript – 添加类到所有元素与一个类