Question

我在div容器中显示6个div。我正在使用一些复选框作为过滤器，点击其中我隐藏并根据给予div的数据属性显示div。

我可以根据需要隐藏和显示div。但同时我想显示屏幕上显示的div的数量。例如，我们在开始时有4个div，所以在开始计数时应该是4，当我们选中一个复选框时，隐藏了2个div，显示了2个。

所以计数将是2。

下面是我的div arrangment

HTML：

<div id="prod">
<div class="content" data-name="John" data-location="UK">John</div>
<div class="content" data-name="Peter" data-location="Aus">Peter</div>
<div class="content" data-name="Peter" data-location="UK">Peter</div>
<div class="content" data-name="Peter" data-location="UK">Peter</div>
<div class="content" data-name="John" data-location="Aus">John</div>
</div>
<input type="checkbox" class="name" id="Peter">Peter
<input type="checkbox" class="name" id="John">John
<input type="checkbox" class="location" id="UK">UK
<input type="checkbox" class="location" id="US">US

JavaScript的：

<script type="text/javascript">
var a=$("input.name");
var b=$("input.location");
var name=new Array();
var location=new Array();
$('input[type="checkbox"]').change(function(){
if($(this).is(":checked")){
   $('.container >div').hide();
   if(this.className == "name"){
       console.debug("name checked");
       name.push($(this).attr('id'));
    }else if(this.className == "location"){
       console.debug("location checked");
       location.push($(this).attr('id'));
    }
     console.log(name+","+location);
     displaydivs(name,location);
}else{
 $('.container >div').show();
 if(this.className == "name"){


     var index = name.indexOf($(this).attr('id'));
     if (index > -1) {
        name.splice(index, 1);
     }       
 }else if(this.className == "location"){

 alert("location");
     var index = location.indexOf($(this).attr('id'));
     if (index > -1) {
        location.splice(index, 1);
     } 
 }
 displaydivs(name,location);
}     
});


function displaydivs(name,location)
{
    $(".container >div").hide();
if(name.length > 0 & location.length > 0){ 
    $.each(name, function( index, value ){
        var temp = $(".container >div[data-name="+value+"]")[0];
        var data = $(temp).attr("data-location");
        var idx = location.indexOf(data);
        if(idx > -1){

          $("#prod >div[data-name="+value+"][data-location="+data+"]").show();
        }            
    });  
    $.each(location, function( index, value ){
        var temp = $(".container >div[data-location="+value+"]")[0];
        var data = $(temp).attr("data-name");
        var idx = name.indexOf(data);
        if(idx > -1){

       $("#prod >div[data-name="+data+"][data-location="+value+"]").show();
        }            
    });
}
else if(name.length > 0 & !(location.length > 0)){ 
    $.each( name, function( index, value ){

        $("#prod >div[data-name="+value+"]").show();
    });
}
else if(!(name.length > 0) & location.length > 0){ 
    $.each( location, function( index, value ){

        $("#prod >div[data-location="+value+"]").show();
    });
}else{
    $("#prod >div").show();

}
}

我基本上想要显示在屏幕上查看的计数div。像启动它应该是5然后如果检查了一些东西，让我们说彼得然后计数应该是3因为有3个div与数据名称作为彼得，然后如果彼得和约翰都被检查那么计数应该是5，因为有5个div包含这两个名字，如果你选择彼得和位置作为英国然后计数应该是2，如果彼得和位置作为英国和澳大利亚然后计数应该是3，因为彼得与英国和澳大利亚总共为3。

请在上面的场景中帮助我。应该怎么做？

Answer 1

使用此功能

function getCount()
{
    count = 0;
    $('.content').each(function(index, element) {

        var u_id = '#'+$(this).data('name');
        var l_id = '#'+$(this).data('location');
        if($(u_id).is(':checked') || $(l_id).is(':checked'))
        {
            count=count+1;
        }
    });
    return count;
}

在选择时显示所显示div的计数

1 个答案: