jQuery Onclick 过滤器仅适用于第一项

Question

我正在尝试为我的列表创建一个过滤器，它正在按我的要求工作。但是，它仅适用于第一个过滤器，而不适用于其余过滤器。我不明白为什么。

我想要实现的是，单击 'parent' 过滤器将隐藏 'childList' 列表项，这些项与所选父级不具有相同的 'gid' 属性.

我的代码如下：

HTML

<ul>
    <li class="parent" gid="2">2</li>
    <li class="parent" gid="3">3</li>
    <li class="parent" gid="4">4</li>
</ul>

<ul>
    <li class="childList" gid="2">2.1</li>
    <li class="childList" gid="2">2.2</li>
    <li class="childList" gid="2">2.3</li>
    <li class="childList" gid="3">3.1</li>
    <li class="childList" gid="3">3.2</li>
    <li class="childList" gid="3">3.3</li>
    <li class="childList" gid="4">4.1</li>
</ul>

CSS

li {
    display: inline-block;
    padding: 20px;
    border: 1px solid black;
    cursor: pointer;
}

.selected {
    background-color: green;
}

Javascript

$(function() {
  $('.parent').on('click', function() {
    $(this).select().toggleClass('selected')

    var gid = $(this).select().attr('gid')
    if ($(this).select().attr('class') == 'parent')
      $('.childList').show()
    else {
      console.log(gid)
      if ($('.childList').attr('gid') == gid)
        $('.childList').not('[gid="' + gid + '"]').hide()
    }
  })
})

非常感谢您的意见和帮助。谢谢。

Answer 1

检查下面的代码

$('.childList').hide();

$(function() {
  $('.parent').on('click', function() {
    $(this).select().toggleClass('selected')

    var gid = $(this).attr('gid');
    
    $('.childList[gid="'+gid+'"]').toggle(200);
  });
});

li {
    display: inline-block;
    padding: 20px;
    border: 1px solid black;
    cursor: pointer;
}

.selected {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="parent" gid="2">2</li>
    <li class="parent" gid="3">3</li>
    <li class="parent" gid="4">4</li>
</ul>

<ul>
    <li class="childList" gid="2">2.1</li>
    <li class="childList" gid="2">2.2</li>
    <li class="childList" gid="2">2.3</li>
    <li class="childList" gid="3">3.1</li>
    <li class="childList" gid="3">3.2</li>
    <li class="childList" gid="3">3.3</li>
    <li class="childList" gid="4">4.1</li>
</ul>

Answer 2

既然你说了 "filter" 我假设它应该像这样工作：当没有应用过滤器时，显示整组子项。

也就是说：

$(function() {
  $('.parent').on('click', function() {
    $(this).toggleClass('selected');

    // reset view
    $(".childList").show();

    // apply filter
    var selectedGids = $(".parent.selected").toArray().map(function(o) {
      return $(o).attr("gid");
    });
    if(selectedGids.length)
      $(".childList").filter(function() {
      var gid = $(this).attr("gid");
      return $.inArray(gid, selectedGids) == -1;
    }).hide();
  })
})

li {
  display: inline-block;
  padding: 20px;
  border: 1px solid black;
  cursor: pointer;
}
.selected {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="parent" gid="2">2</li>
  <li class="parent" gid="3">3</li>
  <li class="parent" gid="4">4</li>
</ul>
<ul>
  <li class="childList" gid="2">2.1</li>
  <li class="childList" gid="2">2.2</li>
  <li class="childList" gid="2">2.3</li>
  <li class="childList" gid="3">3.1</li>
  <li class="childList" gid="3">3.2</li>
  <li class="childList" gid="3">3.3</li>
  <li class="childList" gid="4">4.1</li>
</ul>

Answer 3

我使用函数childreen()循环了ul的所有childreen。为此，我还向 ul 添加了一个 class。在这个例子中，我刚刚制作了 if to show current selected parent's childreen。但是如果你 select 两个 parent 它没有任何显示，如果你想修改它只需更改 "if" 句子。至少使用 .childreen() 函数，您可以将每个 child 都放在一个数组中，因此我认为更容易决定要做什么。

<ul class="childGid">

和javascript

      var listChildreen = $( "ul.childGid" ).children()

  for(var i = 0; i< listChildreen.length; i++) {
  console.log($(listChildreen[i]).attr('gid'));
        if ($(listChildreen[i]).attr('gid') != gid)
            $(listChildreen[i]).hide()
      }

所有代码：https://jsfiddle.net/x4zx2y37/2/

jQuery Onclick 过滤器仅适用于第一项

jQuery Onclick Filter Only Working for First Item Only

html

javascript

jquery

frontend