javascript - 过滤器的 jQuery 自定义代码，仅使用 Closest() 函数使用相同的字符串

Question

所以，我正在创建一个 jQuery 来过滤掉画廊。当我选择图库的标题时，它只会在图库内容上显示相同的单词(标题)。

网站在这里:http://stout.thedainc.com/before-and-after-gallery/

按照本文的指导，我已经成功了。指导http://jsfiddle.net/XjgR2/ JQuery hide all divs except for the divs I search for

但是当我要选择更多标题时，事件 div 或文章正在消失。

您能指导我需要修改或添加哪些内容吗？

这里是我的jquery

<script>
    // for live search
    // Guide http://jsfiddle.net/XjgR2/
    jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery("#banda").css("display","none");

        jQuery('a[id="set-filter"]').click( function(){

            jQuery("#splash").fadeOut();
            jQuery("#banda").fadeIn();
            var getjun = (jQuery(this).text());
            //alert(getjun);
            jQuery('<span id="setted-filtered">' + getjun + '</span>').appendTo('#filtered-jun');

            var query = jQuery(this).text().toLowerCase();

            jQuery('div[id="banda"] h2.entry-title a').each(function(){
                var $this = jQuery(this);

                alert(query);
                if ($this.text().toLowerCase().indexOf(query) === -1) {

                     $this.closest('#banda .before_after').fadeOut();
                     jQuery('#banda .before_after').addClass("active-ba");

                } else {  
                    alert('nasa else');
                    $this.closest('#banda .before_after').fadeIn();
                }
            });

        });
    });
</script>

视频在这里:https://www.screencast.com/t/mMq3VkxFr

因此，如果我在过滤器一侧选择 1，它就会起作用。但是当我选择多个过滤器时，它根本不显示。

Answer 1

我已经通过过滤弄清楚了。我尝试编写代码如何删除过滤器添加的项目。当我单击 X(关闭按钮)时，它还会删除所有添加的过滤器。

截图在这里https://www.screencast.com/t/kNJLCcE1v

完整的 jQuery 代码。 (请查找//Remove )

<script>
    // for live search
    // Guide http://jsfiddle.net/XjgR2/
    jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery("#banda").css("display","none");

        jQuery('a[id="set-filter"]').click( function(){

            jQuery("#splash").fadeOut();
            jQuery("#banda").fadeIn();

            var getjun = (jQuery(this).text());
            //alert(getjun);
            jQuery('<span id="setted-filtered" class="active-ba"><i class="far fa-times-circle" id="remove-filter"></i> ' + getjun + '</span>').appendTo('#filtered-jun');

            var query = jQuery(this).text().toLowerCase();

            jQuery('div[id="banda"] h2.entry-title a').each(function(){
                var $this = jQuery(this);

                alert(query);


                if ($this.text().toLowerCase().indexOf(query) === -1 ) {

                     $this.closest('#banda .before_after').fadeOut();

                } else {  
                    alert('nasa else');
                    $this.closest('#banda .before_after').addClass("active-ba");

                    if (jQuery('.before_after').hasClass('active-ba')) {
                        alert( 'active class');
                        $this.closest('#banda .before_after').fadeIn();
                    }
                }
            });


            // Remove
            jQuery('span[id="setted-filtered"] i[id="remove-filter"]').click( function() {
                jQuery('span[id="setted-filtered"]').each(function(){
                    jQuery('span[id="setted-filtered"]').remove();

                    var $this = jQuery(this).text().toLowerCase();
                    alert($this);

                    if ($this.indexOf(query) === -1 ) {

                         $this.closest('#banda .before_after').fadeOut();

                    } else {  
                        alert('nasa else remove');
                        $this.closest('#banda .before_after').addClass("active-ba");

                        if (jQuery('.before_after').hasClass('active-ba')) {
                            alert( 'active class');
                            $this.closest('#banda .before_after').fadeIn();
                        }
                    }
                });
            });

        });

    });
</script>