我在执行以下代码时遇到一些问题：
var i = 1;
$('.hello:not(.selected)').on('click',function(){
$(this).addClass('selected');
console.log(i++);
});
问题是这个代码应该在选择的类添加一次之后触发,但是它正在执行很多次,我只是希望我的变量不增加.换句话说,我试图做以下(这是有效的,但我不想使用活动的功能,因为它已被弃用)：
$('.hello:not(.selected)').live('click',function () {
$('.hello').removeClass('selected');
$(this).addClass('selected');
...
});
非常感谢您的回复,
ķ
解决方法
您的代码正在使用当前满足此条件的元素集：
$('.hello:not(.selected)')
并为所有永恒设置此事件处理程序：
.on('click',function(){
$(this).addClass('selected');
$(this).css({opacity : 0.5});
console.log(i++);
});
特别重要的是,一旦处理程序设置在元素上,它将继续处于活动状态,即使稍后该元素不再满足条件(在这种情况下,通过获取所选类).
有几种方法来实现所需的行为.一个是动态地检查“过滤器”条件是否仍然保存在事件处理程序内：
$('.hello').on('click',function(){
if($(this).hasClass('selected')) {
return;
}
$(this).addClass('selected');
$(this).css({opacity : 0.5});
console.log(i++);
});
另一个是委托事件 – 在这种情况下,父元素将在其后代的一个通知事件,并且将在决定触发事件处理程序(代码无耻粘贴)之前动态地检查所述后代是否满足过滤条件从本李的答案)：
$('body').on('click','.hello:not(.selected)',function() {
$(this).addClass('selected');
$(this).css({opacity : 0.5});
console.log(i++);
});
