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。

请指导我如何在此列表上进行价格过滤。如果总结机构可以帮助我，将会有很多帮助。

Answer 1

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

并对所有数据属性采用相同的模式

使用data-price属性过滤产品列表

1 个答案: