Question

我对javascript和jquery有点新鲜，而且我在＆＃34; nice＆＃34;中做了我想做的事情。方式。

我有一个像这样的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>

我想添加某种＆＃34;过滤器＆＃34;，如果您点击某个类别链接，其他类别的所有元素都将消失。我设法通过向我的css添加一个名为invis的类来实现它，使用＆＃34; display：none＆＃34;，然后写下这个：

$( ".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');
  }
});

这可以胜任，但我想找一个更清洁的＆＃34;这样做的方式。我该如何改进呢？

谢谢！

Answer 1

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

这样您就不会需要额外的invis课程。

你会注意到＆＃34; ^ =＆＃34;在下面的代码中，它只是一个选择器，字面意思是＆＃34;以＆＃34;开头。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

隐藏所有带有“row”类的元素，然后在类“row”中取消隐藏所有具有类[被点击内容的id]的元素。

$('.list-group-item').click(function(event) {
  $('.row').addClass('invis');
  $('.row.' + event.target.id).removeClass('invis');
});

Answer 3

只需添加到您的所有类别 .category-all您完成了半工作。
现在，您可以轻松控制id＆gt;＆gt;＆gt; class关系。

<强> jsBin demo

如果您需要始终至少有一个类别可见，那很简单：

var $btns = $(".list-group-item");
var $ctgs = $("[class^='category-']");
$ctgs.addClass("category-all");                         // Job done! :D :D

$btns.click(function(e) {
  $ctgs.hide();                                         // Hide all
  $("."+this.id).show();                                // Show realated
});

否则，下面的代码将允许您有任何您想要的组合甚至隐藏/切换活动的那些：

<强> jsBin demo

var $btns = $(".list-group-item");
var $ctgs = $("[class^='category-']");
$ctgs.addClass("category-all");                         // Job done! :D :D


$btns.click(function(e) {    
  $ctgs.not("."+this.id).hide();                        // Hide all (not this...)
  $("."+this.id).toggle( $(this).hasClass("active") );  // Toggle realated
});

Answer 4

免责声明：未经测试。

$('.list-group-item').click(function() {
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
    var id = $(this).attr('id');
    if(id == 'category-all') {
        $('div.row > div').show();
    } else {
        $('div.row > div.' + id).show();
        $('div.row > div:not(.' + id + ')').hide();
    }
});

Answer 5

这是另一个版本。为可见性添加了颜色编码。 *编辑更新以实际拥有正确的行为。

http://codepen.io/anon/pen/NPrGJp

$( ".list-group-item" ).click(function() {
  $('.active').removeClass('active');
  $(this).addClass('active');
  $('.row > div').show();
  $('.' + $(this).attr('id')).hide();
});

将类添加到具有特定类的所有元素

5 个答案: