Question

我使用以下代码计算span类check_box和uncheck_box的元素数量，它可以正常工作。单击带复选框的项目时，其跨度将更改为取消选中，反之亦然。我希望计数在没有页面重新加载的情况下动态更改，点击该项目。

我怎样才能实现这个目标？

jQuery('.complete-count').append(jQuery('.check_box').length);
jQuery('.incomplete-count').append(jQuery('.uncheck_box').length);

HTML：

<span><a href="javascript:;" class="sort active showall">All</a></span>
        <span><a href="javascript:;" class="sort complete">Completed</a></span>
        <span><a href="javascript:;" class="sort incomplete">Incomplete</a></span>

<ul class="leftlist">
<li class="todo" id="1011" itemage="1"><a href="javascript:;"> 
<a href="javascript:;" class="strike">           
                <span class="check_box cb"></span>

            <p>Option 1 Complete</p> </a>
</li>

<li class="todo" id="1011" itemage="1"><a href="javascript:;"> 
<a href="javascript:;">           
                <span class="uncheck_box cb"></span>

            <p>Option 1 Incomplete</p> </a>
</li>

<li class="todo" id="1011" itemage="1"><a href="javascript:;"> 
<a href="javascript:;" class="strike">           
                <span class="check_box cb"></span>

            <p>Option 1 Complete</p> </a>
 </li>

<li class="todo" id="1011" itemage="2"><a href="javascript:;"> 
<a href="javascript:;">          
                <span class="uncheck_box cb"></span>

            <p>Option 2 InComplete</p> </a>
</li>

Answer 1

我不知道您的复选框的类别，但如果没有其他复选框，这应该有效：

var $checkboxes = jQuery('li.todo a'),
    $completeCount = jQuery('.complete-count'),
    $incompleteCount = jQuery('.incomplete-count');

var updateCount = function(){
    $completeCount.text(jQuery('.check_box').length);
    $incompleteCount.text(jQuery('.uncheck_box').length);
};

$checkboxes.on('click', updateCount);
updateCount();

基本上，我们将复选框缓存到$checkboxes中，并且我们以与之前相同的方式存储对完整计数持有者和不完整计数的一些引用。

我们在change事件上附加了一个事件处理程序，它基本上与您之前使用的功能相同。

Answer 2

试试这个..

$('.check_box, .uncheck_box').click(function(){
   jQuery('.complete-count').append(jQuery('.check_box').length);
   jQuery('.incomplete-count').append(jQuery('.uncheck_box').length);
})

计算jQuery中动态变化的元素

2 个答案: