Question

我正在尝试为我的列表制作一个过滤器，它正在按我的意愿工作。但是它只适用于第一个过滤器，而不是其余的。我无法弄清楚原因。

我想要实现的目的是点击“父”过滤器会隐藏“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

因为你说“过滤器”我认为它应该是这样的：当没有应用过滤器时，显示整套子项。

即便：

$(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 2

我使用函数childreen（）来循环ul的所有childreen。我还为ul添加了一个类。在这个例子中，我刚刚制作并且是否显示当前选定的父母的子项。但是如果你选择了两个父母，如果你想修改它就没有任何内容，只需更改＆＃34; if＆＃34;句子。至少使用.childreen（）函数，你可以让每个孩子都在一个数组中，所以我认为更容易决定做什么。

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

Answer 3

检查以下代码

$('.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>

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

3 个答案: