javascript - 用于显示/隐藏以及附加和删除的 jQuery 过滤器

Question

我正在尝试创建一个简单的过滤器来按颜色过滤 DOM 元素，过滤器的一部分工作得很好，我单击列表中的项目，但我还想做的是创建一个所选过滤器的标记带有小十字，单击该标记会将过滤器重置回之前的状态。

过滤 HTML

<div class="accordion-content">
  <ul id="color-filter">
    <li class="form-checkmark is-selected" data-filter="black" data-filter-type="color"><span class="label"><span class="checkbox black checkmark"></span><span class="radio-text">Black</span></span></li>    
    <li class="form-checkmark" data-filter="blue" data-filter-type="color"><span class="label"><span class="checkbox blue"></span><span class="radio-text">Blue</span></span></li>
    <li class="form-checkmark" data-filter="brown" data-filter-type="color"><span class="label"><span class="checkbox brown"></span><span class="radio-text">Brown</span></span></li>
    <li class="form-checkmark" data-filter="green"  data-filter-type="color"><span class="label"><span class="checkbox green"></span><span class="radio-text">Green</span></span></li>
  </ul>
</div>

HTML 元素

<div class="grid-23 material-tiles">
  <div class="selected-filters">
     <div class="filter-label">YOUR ACTIVE FILTERS</div>
     <div class="filter-item"><span>Black</span><span class="filter-close"></span></div>
     <div class="filter-item"><span>Blue</span><span class="filter-close"></span></div>
  </div>    
<div class="grid-3 samples" data-color="black">
        <span class="sample-name">Black</span>
</div>
<div class="grid-3 samples" data-color="black">
        <span class="sample-name">Black</span>
</div>    
<div class="grid-3 samples" data-color="blue">
        <span class="sample-name">Blue</span>
</div>
<div class="grid-3 samples" data-color="blue">
        <span class="sample-name">Blue</span>
</div>
<div class="grid-3 samples" data-color="brown">
        <span class="sample-name">Brown</span>
</div>
<div class="grid-3 samples" data-color="brown">
        <span class="sample-name">Brown</span>
</div>
</div>

第一部分.selected-filters应显示所选的过滤器

剩下的就是<div>带有应显示或隐藏的示例颜色，具体取决于选择。

所以我想要存档的是当过滤器标签关闭以显示隐藏的颜色样本并删除类 .checkmark 时和.is-selected同时关闭标签<div class="filter-item"><span>Black</span><span class="filter-close"></span></div>或者，如果再次单击过滤器，则执行与上面相同的操作。

到目前为止，我的尝试失败了，因为我对 js 和 jQuery 不太了解。

jQuery

    function onGridChangeRequest() {
    var  selected = [];

    $('#color-filter').find('.is-selected').each(function(i, el) {
        selected.push($(this).attr('data-filter'));
    })

    $('.material-tiles').find('.samples').each(function(i, el) {
        if(selected.length) {
            if (selected.indexOf($(el).attr('data-color')) !== -1) {
                $(el).show();
                return;
            }
            $(el).hide();
            return;
        }
        $(el).show();

    })
}

$('#color-filter > li').on('click', function(e) {
    var checkBox = $('.checkbox');
    var filteBlock = '<div class="filter-item"><span>'+ $(this).text() +'</span><span class="filter-close"></span></div>';
    $(this).toggleClass('is-selected');
    $(this).find(checkBox).toggleClass('checkmark');
    $('.selected-filters').css('display','block').append(filteBlock);


    $('.filter-close').on('click', function () {
        $(this).parent().remove();
        $('#color-filter > li').find(checkBox).removeClass('checkmark');
        $('#color-filter > li').removeClass('is-selected');
        $('.material-tiles').find('.samples').css('display','block');
    });
    onGridChangeRequest();
});

Here is Fiddle

Answer 1

$('#color-filter > li').on('click', function (e) {
            var checkBox = $('.checkbox');
            $(this).toggleClass('is-selected');
            $(this).find(checkBox).toggleClass('checkmark');
            var color = $.trim($(this).text());
            if ($(this).find(checkBox).hasClass('checkmark')) {
                var filteBlock = '<div class="filter-item"><span>' + $(this).text() + '</span><span class="filter-close">X</span></div>';
                $('.selected-filters').show().append(filteBlock);

            } else {
                $(".filter-item span:contains('" + color + "')").parent().remove();
            } 
            
            if($(".selected-filters .filter-item").length<=0){
            $(".selected-filters").hide();
            }
            
            onGridChangeRequest();
        });

        $('body').on('click', '.filter-close', function () {
            $(this).parent().remove();
            var color = $.trim($(this).siblings('span').text());
            $('#color-filter > li .radio-text:contains("' + color + '")').trigger('click');
            onGridChangeRequest();
        });
        
        
        function onGridChangeRequest() {
    var  selected = [];

    $('#color-filter').find('.is-selected').each(function(i, el) {
        selected.push($(this).attr('data-filter'));
    })

    $('.material-tiles').find('.samples').each(function(i, el) {
        if(selected.length) {
            if (selected.indexOf($(el).attr('data-color')) !== -1) {
                $(el).show();
                return;
            }
            $(el).hide();
            return;
        }
        $(el).show();

    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-13 filter">
  <div class="filters-body">
    <div class="accordion is-open">
      <h3 class="accordion-header">COLOUR<span class="accordion-indicator"></span></h3>
        <div class="accordion-content">
          <ul id="color-filter">    
            <li class="form-checkmark" data-filter="black">
              <span class="label">
                <span class="checkbox black"></span>
                <span class="radio-text">Black</span>
              </span>
            </li>    
            <li class="form-checkmark" data-filter="blue">
              <span class="label">
                <span class="checkbox blue"></span>
                <span class="radio-text">Blue</span>
              </span>
            </li>    
            <li class="form-checkmark" data-filter="brown">
              <span class="label">
                <span class="checkbox brown"></span>
                <span class="radio-text">Brown</span>
              </span>
            </li>    
            <li class="form-checkmark" data-filter="green">
              <span class="label">
                <span class="checkbox green"></span>
                <span class="radio-text">Green</span>
              </span>
            </li>                   
          </ul>
        </div>
    </div>
  </div>
</div>

<div class="grid-23 material-tiles">
  <div class="selected-filters" style="display:none">
    <div class="filter-label">YOUR ACTIVE FILTERS</div>
  </div>    
  <div class="grid-3 samples" data-color="black">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: #000;">Black</span>
  </div>
  <div class="grid-3 samples" data-color="black">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: #000;">Black</span>
  </div>
  <div class="grid-3 samples" data-color="blue">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: blue;">Blue</span>
  </div>
  <div class="grid-3 samples" data-color="blue">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: blue;">Blue</span>
  </div>  
  <div class="grid-3 samples" data-color="brown">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: brown;">Brown</span>
  </div>
  <div class="grid-3 samples" data-color="brown">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: brown;">Brown</span>
  </div>
  <div class="grid-3 samples" data-color="green">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: green;">Green</span>
  </div>
  <div class="grid-3 samples" data-color="green">
    <span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: green;">Green</span>
  </div>
</div>

我已经更新了您的fiddle现在它可以工作了，请看一下。

基本上有两个问题:

其中之一是，如果未选中复选框，则不会检查您的条件。我刚刚检查了 checkmark 类，即 $(this).find(checkBox).hasClass('checkmark') 如果这是 true 那么我们只需附加过滤器没有其他的。如果不是 true，那么我们将删除该过滤器，然后调用您的 onGridChangeRequest() 方法，该方法将在样本中进行过滤。

另一个是，如果直接删除过滤器，则需要执行相同的逻辑。一件事是您动态添加过滤器，因此 click() 事件直接不适用于关闭过滤器，因为您使用的 click() 绑定(bind)称为“直接”绑定(bind)这只会将处理程序附加到已经存在的元素上。它不会绑定(bind)到将来创建的元素。为此，您必须使用 on() 创建“委托(delegate)”绑定(bind)。所以使用了 $('body').on('click', '.filter-close', function () {}。从过滤器中我们将获得颜色名称并触发手动点击具有该颜色的 li 事件，因此我们的单选按钮单击逻辑将自动调用，您将获得相同的结果。

这里使用的主要选择器之一是 contains属性。