jQuery custom code for filter, with same string only using closest() function

Question

So, I am creating a jQuery that will filter out the gallery. When i select the tittle of the gallery it will only display the same word(title) on the gallery content.

the website is here: http://stout.thedainc.com/before-and-after-gallery/

I have it work, with the guide of this article. Guide http://jsfiddle.net/XjgR2/ JQuery hide all divs except for the divs I search for

But when i am about to select more title the active div or article is disappearing.

Can you please guide me what i need to modify or add?

my jquery here

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

Video here: https://www.screencast.com/t/mMq3VkxFr

So if i select 1 on the filter side, it is working. But when i selected multiple filters, its not displaying at all.

sorry for that first to post here. – Signature Essentials Dec 20 '19 at 12:19 — Signature Essentials, Dec 20 '19 at 12:19
I have figured it out. – Signature Essentials Dec 20 '19 at 12:58 — Signature Essentials, Dec 20 '19 at 12:58

score 0 · Answer 1 · answered Dec 20 '19 at 13:47

I have figured it out with filtering. I have tried to code how i can remove the added item for the filter. When I click X (close button) it also removes all added filters.

Screenshot here https://www.screencast.com/t/kNJLCcE1v

Full jQuery code. ( please look for //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>

jQuery custom code for filter, with same string only using closest() function

1 Answers1