javascript - 计算 jQuery 中动态变化的元素

Question

我使用以下代码计算跨度类 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 事件上附加一个事件处理程序，它基本上与您之前使用的函数相同。