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>

请注意数据品牌=＆＃34; 3＆＃34; data-inverter =＆＃34; 1＆＃34; 。因此，在您的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

jQuery过滤器元素具有多个属性

1 个答案: