Question

我有一个过滤元素，如jsfiddle所示。

是否可以在过滤器链接旁边显示用户选择过滤器的数量？

注意：在我的情况下，过滤器元素是动态的，因此不能使用元素id或name作为选择器，但<div class="filtersDiv">是静态的。

更新

即使表单元素是动态的，元素名称也会以user_开头，修改后的jsfiddle，希望这可能有助于解决问题。

Answer 1

嘿，你已经更新了你的小提琴

Fiddle

代码在这里

$(document).ready(function(){
    $(document).on('click',"a#filters",function(e)
    {
        e.preventDefault();
        $("div.filtersDiv").toggle('slow');
    });
    var count=0;
    $('input:checkbox').on('change', function(){ 
     if($(this).is(':checked')){
            count +=1;
        }else{
           count -=1; 
        }
        $("#countid").html(count);
    });
    $('input[name=user_gender]').on('change', function(){
       $("#countid").html(count += 1);
        $('input[name=user_gender]').unbind('change');
     });  
   $('input[type=text]').blur(function(){
       if($.trim($(this).val()) !=''){
        count +=1;   

       }else{
         count -=1;              
       }
    $("#countid").html(count);   
   }); 
});

Answer 2

在过滤器锚点下添加一个范围

<a href="#" id="filters">Filters</a>
<span id="count"></span>

并在$(document).ready()处理程序

中添加此处理程序

$('.filtersDiv').on('keyup focus blur change', ':input', function(){
    var num_of_active_filters =  $(":text[value!=''], :file, :checkbox:checked, select, textarea, :radio:checked").length;
    $('#count').text(num_of_active_filters)
});

jQuery：如何计算填充的表单元素

2 个答案: