文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jQuery过滤器显示/隐藏、追加和删除

问jQuery过滤器显示/隐藏、追加和删除
EN

Stack Overflow用户
提问于 2017-06-12 20:48:52
回答 1查看 3.8K关注 0票数 1

我正在尝试创建一个简单的过滤器来按颜色过滤DOM的元素，过滤器的一部分工作得很好，我点击了列表中的项目，但我也试图创建一个带有小十字的选定文件器的标记，即单击它将过滤器重新设置为以前的状态。

过滤器

代码语言：javascript
复制
<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元素

代码语言：javascript
复制
<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>，样本颜色应该显示或隐藏，这取决于所选内容。

因此，我试图存档的是，当关闭filter标记以显示隐藏的颜色样本并删除类.checkmark和.is-selected时，同时关闭标记<div class="filter-item"><span>Black</span><span class="filter-close"></span></div>，或者如果再次单击<div class="filter-item"><span>Black</span><span class="filter-close"></span></div>，则执行上述操作。

到目前为止，我的尝试失败了，因为我对js和jQuery知之甚少。

jQuery

代码语言：javascript
复制
    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();
});

这是Fiddle

javascript
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-13 18:25:32

​

代码语言：javascript
复制
$('#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();

    })
}
代码语言：javascript
复制
<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>

​

我已经更新了你的小提琴现在它的工作请看一看。

基本上有两个问题：

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

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

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44508487

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档