Javascript 使用数据价格属性筛选产品列表

我可以根据代码中的商店和品牌筛选产品列表，但无法根据价格范围进行筛选

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

这段代码对商店和品牌都很有效，但我无法编写价格范围过滤代码。基本上我的要求如下

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

请指导我如何在此列表上进行价格筛选。如果sum body可以帮助我，这将非常有帮助。

请尝试使用.data'store而不是.attr'data-store'

---

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

使用[data price]作为选择器。无法使用范围进行选择，先生，您能帮我提供一个关于此的小代码片段吗。。。。Please@C-链接请帮助一旦你上了台式机或笔记本电脑…我尝试了。数据'存储'，但是我不能为数据价格过滤编写逻辑。你能在代码方面帮助我吗？@Marco你能帮我解决上面场景的价格过滤吗？因为我在javascript方面很弱。提前谢谢，先生…看一下编辑过的帖子，在那里我添加了价格脚本…请检查一下，我试过了，但没用。guyzz，请帮帮我

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