javascript - jQuery 过滤具有多个属性的元素

Question

我有一个产品列表。每个产品都属于一个品牌，并且产品可以是“逆变器”(示例属性)并且有价格。

我需要按品牌、价格范围和属性过滤产品。

我不想向服务器发送 ajax 请求进行过滤。

我正在使用 jQuery filter() 函数来做到这一点。

在价格和“逆变器”过滤方面，一切对我来说都工作正常，但当我尝试将其与带有阵列的品牌结合起来时，它工作错误。 Fiddle

 var price_from = jQuery('#min_price').val();
        var price_to = jQuery('#max_price').val();
        var inverter = jQuery('#inverter').val();
        var brands = [];

        var brands = jQuery("input[name='brand']:checked").map(function() {
                return parseInt( $(this).val() );
            }).get();       

        if ( jQuery.isNumeric( price_from ) ) {
            price_from  = parseInt(price_from);         
        }else{
            price_from = 0; 
        }

        if ( jQuery.isNumeric( price_to ) ) {
            price_to = parseInt(price_to);          
        }else{
            price_to = 30000000; 
        }

        jQuery('#kod-pr-catalog .new-pr').hide().filter(function()  {
            var brand = parseInt($(this).data('brand'));

            if ( jQuery('#inverter').is(":checked") && ( brands.length <= 0 ) && ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) ) { 
                console.log( "invertor ");
                return ( ( jQuery(this).data('inverter') == '1' ) && ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) );

            } else if ( jQuery('#inverter').is(":checked") && ( brands.length > 0  ) && ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) ) {
                console.log( "invertor dd");
                return ( ( jQuery.inArray( brand, brands ) > -1 ) && ( jQuery(this).data('inverter') == '1' ) && ( $(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) );       

            } else if ( !jQuery('#inverter').is(":checked") && ( brands.length > 0 ) && ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) ) {
                console.log( brands.indexOf( brand ) );
                return ( ( brands.indexOf( brand ) >= 0 ) && ( jQuery(this).data('inverter') == '0' || jQuery(this).data('inverter') == '' ) && ( $(this).data('price') >= price_from && $(this).data('price') <= price_to ) );     

            } else if ( !jQuery('#inverter').is(":checked") && ( brands.length <= 0 ) && ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) ) {
                console.log( "invertorssss ");
                return  ( jQuery(this).data('price') >= price_from && jQuery(this).data('price') <= price_to ) ;        

            } else if ( !jQuery('#inverter').is(":checked") && ( brands.length <= 0 ) && ( jQuery(this).data('price') == 0 && jQuery(this).data('price') == 30000000 ) ) {
                return  false;      
            }       

        }).show();

我有5个产品，其中2个是逆变器，价格范围是0-20000，每个产品品牌都不同。当我检查所有品牌并取消选择逆变器时，只出现一种产品，而不是全部 5 个。

我的错误在哪里？

Answer 1

在你的 html 中你有:

<div class="new-pr" data-price="5000" data-id="8" data-brand="3" data-new="1" data-act="1" data-inverter="1" data-sale="1" style="display: block;">

<!-- your items -->

</div>

请注意data-brand="3"data-inverter = "1"。因此，在您的 javascript 代码中，将执行此行:

return ( ( jQuery.inArray( brand, brands ) > -1 ) && ( jQuery(this).data('inverter') == '0' || jQuery(this).data('inverter') == '' ) && ( $(this).data('price') >= price_from && $(this).data('price') <= price_to ) );

( jQuery(this).data('inverter') == '0' || jQuery(this).data('inverter') == '' ) 是 false ，因为 jQuery(this).data('inverter') = 1