Question

我正在尝试使用jQuery来计算具有某个类的 ul li 元素。该类正在被另一个jQuery脚本打开和关闭：

 $(document).ready(function(){

$(".checkbox1").click(function(){
    $("li.tom").toggleClass( "hider" );
});
});

我理解这意味着我需要添加一个事件处理程序来监听 ul 中的更改：

 $('.cartlist').on('click', 'li.hider', function () {

    var total=$('.cartlist > li.hider').length;
        $('.totalCount').html('$' +total * 999); 
    }); });

我编写的脚本是半工作的，因为我使用的.on（）处理程序成功计算了类 hider ，但仅限于 li 项目点击。毫无疑问，这是因为我正在使用.on（'click'）。我已经阅读了.on（）的jQuery文档，根据我的理解，我应该可以使用其他DOM挂钩，如'load'，'scroll'等。但是，当我替换.on（'click'）时使用.on（'load'）或.on（'change'），没有任何反应。此外，取消选中复选框不会改变总数，可能是因为处理程序与 ul 绑定并且不关心复选框...

Fiddle

我是新来的jQuery新手，请原谅我所知的明显差距。感谢您对任何回复的期待。

Answer 1

这是一种计算包含特定类的元素的方法。

http://jsfiddle.net/bluey/2GZMY/＆lt;＆lt;的jsfiddle

// Gets the number of elements with class yourClass
$( document ).ready(function() {
    var numItems = $('.thisClass').length;
    $('.howmany').html("counted: "+numItems);
});

Answer 2

您正在观察 UL 而不是输入：

$('.cartlist').on('click', 'li.hider', function () {...

如果你改为观察输入，你的方法是有效的：

$('form').on('click', 'input', function () {

这是JSFIDDLE：http://jsfiddle.net/C8nCf/

使用jQuery使用事件处理程序</li>按类计算动态<li>元素

2 个答案: