jQuery filter not working

enter image description here

Hey i have a event page where different events are displaying, and there i place a filter so that user can select accordingly from those filters. Here is the picture how filter look

As you can see user can select different days, event type and drop in must book
highlights are not part of filter.
so i have write a code for it but it not working properly, as there are differnt days for one event you can see, which creating issue. Here is my code

var dropinbook          = jQuery('input[name=droIn]:checked').val();
    var select_days         = jQuery('#select_days').val();
    var select_event_type   = jQuery('#select_event_type').val();


    jQuery('#select_days').change(function(){
        var dropinbook          = jQuery('input[name=droIn]:checked').val();
        var select_days         = jQuery('#select_days').val();
        var select_event_type   = jQuery('#select_event_type').val();
        if(select_days != ''){
            jQuery( ".eventPost" ).css( "display", "none" );
            jQuery( "."+select_days ).css( "display", "block" );
            jQuery( "."+select_event_type ).css( "display", "block" );
            jQuery( "."+dropinbook ).css( "display", "block" );
        }else{
            jQuery( ".eventPost" ).css( "display", "block" );
        }
    });

    jQuery('#select_event_type').change(function(){
        var dropinbook          = jQuery('input[name=droIn]:checked').val();
        var select_days         = jQuery('#select_days').val();
        var select_event_type   = jQuery('#select_event_type').val();
        if(select_event_type != ''){
            jQuery( ".eventPost" ).css( "display", "none" );
            jQuery( "."+select_days ).css( "display", "block" );
            jQuery( "."+select_event_type ).css( "display", "block" );
            jQuery( "."+dropinbook ).css( "display", "block" );
        }else{
            jQuery( ".eventPost" ).css( "display", "block" );
        }
    });


    jQuery(".dropmust").on('change', function(){
        var dropinbook          = jQuery('input[name=droIn]:checked').val();
        var select_days         = jQuery('#select_days').val();
        var select_event_type   = jQuery('#select_event_type').val();

        jQuery( ".eventPost" ).css( "display", "none" );
        jQuery( "."+dropinbook ).css( "display", "block" );
        jQuery( "."+select_days ).css( "display", "block" );
        jQuery( "."+select_event_type ).css( "display", "block" );

    });

I know this code is not smart i try my best to find the solution but due to multiple days in one event creating issue. so can some one help me with this. Thanks

Read more here:: jQuery filter not working

Leave a Reply

Your email address will not be published. Required fields are marked *