使用数据价格属性过滤产品列表

Question

我可以在我的代码中根据商店和品牌过滤产品列表，但我无法根据价格范围过滤它。

<div id="prod">
    <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br />
    <div class="content" data-brand="Hill" data-price="4300" data-store="JCPenny">Hill</div><br />
    <div class="content" data-brand="Andrew" data-price="1600" data-store="JCPenny">Andrew</div><br />
    <div class="content" data-brand="Hill" data-price="800" data-store="SuperMart">Hill</div><br />
    <div class="content" data-brand="Hill" data-price="2300" data-store="SuperMart">Hill</div><br />
    <div class="content" data-brand="Andrew" data-price="800" data-store="JCPenny">Andrew</div><br />
    <input type="checkbox" class="brand" id="Andrew" />Andrew
    <input type="checkbox" class="brand" id="Hill" />Hill
    <input type="checkbox" class="store" id="JCPenny" />JCPenny
    <input type="checkbox" class="store" id="SuperMart" />SuperMart
    <input type="radio" name="range" class="price" id="0-ALL"/>All
    <input type="radio" name="range" class="price" id="0-2000"/>Rs.0-2000
    <input type="radio" name="range" class="price" id="2000-4000"/>Rs.2000-4000
    <input type="radio" name="range" class="price" id="4000-6000"/>Rs.4000-6000
    <input type="radio" name="range" class="price" id=">6000"/>Rs.>6000
</div>

上面是我的div 布局，下面是我在朋友的帮助下为品牌和商店所做的过滤逻辑的 JavaScript 突出显示

<script>
var a=$("input.brand");
var b=$("input.store");
var brand=new Array();
var store=new Array();
$("input[name=range]").change(function (e) {

alert("range");
    var toggle = this.checked;
    var range = this.value.split('-');
    var rangeFrom = parseInt(range[0]);
    var rangeTo = parseInt(range[1]);
    $(".container >div[data-price]").each(function(){
        var $this = $(this);
        // Check if category is active
        var categoryActive = $("#" + $this.data("brand")).prop("checked");
        // Get price as number
        var price = parseFloat($this.data('price'));
        // Toggle visibility based on category and price range
        $this.toggle(price >= rangeFrom && price <= rangeTo && categoryActive );
    });
});
$('input[type="checkbox"]').change(function(){
    if($(this).is(":checked")){
        $('#prod >div').hide();
        if(this.className == "brand"){
            console.debug("brand checked");
            brand.push($(this).attr('id'));
        }else if(this.className == "store"){
            console.debug("store checked");
            store.push($(this).attr('id'));
        }
        console.log(brand+","+store);
        displaydivs(brand,store);
    }else{
        $('#prod >div').show();
        if(this.className == "brand"){
            var index = brand.indexOf($(this).attr('id'));
            if (index > -1) {
                brand.splice(index, 1);
            }       
        }else if(this.className == "store"){
            var index = store.indexOf($(this).attr('id'));
            if (index > -1) {
                store.splice(index, 1);
            } 
        }
        displaydivs(brand,store);
    }     
});


function displaydivs(brand,store)
{
    $("#prod >div").hide();
    if(brand.length > 0 & store.length > 0){ 
        $.each(brand, function( index, value ){
            var temp = $("#prod >div[data-brand="+value+"]")[0];
            var data = $(temp).attr("data-store");
            var idx = store.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+value+"][data-store="+data+"]").show();
          }            
      });  
        $.each(store, function( index, value ){
            var temp = $("#prod >div[data-store="+value+"]")[0];
            var data = $(temp).attr("data-brand");
            var idx = brand.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+data+"][data-store="+value+"]").show();
          }            
      });
    }
    else if(brand.length > 0 & !(store.length > 0)){ 
        $.each( brand, function( index, value ){
            $("#prod >div[data-brand="+value+"]").show();
        });
    }
    else if(!(brand.length > 0) & store.length > 0){ 
        $.each( store, function( index, value ){
            $("#prod >div[data-store="+value+"]").show();
        });
    }else{
        $("#prod >div").show();
    }
}
</script>

此代码适用于商店和品牌，但我无法为价格范围过滤编写代码。基本上我的要求如下。

当我从复选框列表中选择一个品牌时说安德鲁，然后我选择像 JCPenny 这样的商店，三个 div 将出现，因为 data-brand=andrew 和 data-store=JCPenny 总共只出现在三个 div 中。然后，如果我选择价格范围过滤器（2000-4000），那么我应该只获得数据品牌为 Andrew 且数据存储为 JCPenny 且价格从 2000 到 4000 的 div。

请指导我如何在此列表上进行价格过滤。如果 sum body 可以帮助我，将有很大帮助。

Answer 1

试试.data('store')，而不是.attr('data-store')

所有数据属性都遵循相同的模式