为什么这个添加和删除类在 JQuery 中不起作用?

Question

为什么这不起作用？我简直要疯了。

<span class="fav"></span>
$('.fav').on('click', function() {
$(this).addClass('item-selected');
});
$('.fav.item-selected').on('click', function() {
$(this).removeClass('item-selected');
});

下面是完整的代码。这是不会撤消的第二部分。

$('.fav').on('click', function() {
$(this).addClass('item-selected').next('span.notification').toggleClass('show-notification').html("Hello world!");
setTimeout(function(){
$('.show-notification').removeClass('show-notification');
},4000);
});
$('.fav.item-selected').on('click', function() {
$(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
setTimeout(function(){
$('.show-notification').removeClass('show-notification');
},4000);
});

Answer 1

当您声明.fav元素动态附加到 DOM 时，您需要使用委托的事件处理程序。另请注意，当您在连续单击时切换类时，您不需要多个处理程序;你可以只使用toggleClass().试试这个：

$('#container').on('click', '.fav', function() {
$(this).toggleClass('item-selected');
});

.item-selected {
color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<span class="fav">Item</span>
<span class="fav">Item</span>
<span class="fav">Item</span>
<span class="fav">Item</span>
</div>

Answer 2

这是不会撤消的第二部分。

这是因为您的选择器.fav.item-selector不返回任何元素

试试这个

$('.fav').on('click', function() {
if($(this).hasClass('item-selected')) {
$(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
setTimeout(function(){
$('.show-notification').removeClass('show-notification');
},4000); 
}
});

Answer 3

因为带有类item-selected的span不是原始DOM的一部分，而原始DOM是jQuery使用的。你需要像这样让它更加动态：

.HTML：

<span class="fav target-click"></span>

j查询：

$('.target-click').click(function()
{
if ($(this).hasClass('item-selected')) {
$(this).removeClass('item-selected')
} else {
$(this).addClass('item-selected')
}
})

Answer 4

这是工作代码，这要归功于提供的答案中的帮助。

$(".job-listings").on('click', '.fav', function() {
$(this).addClass('item-selected').next('span.notification').addClass('show-notification').html("Hello world!");
setTimeout(function(){
$('.show-notification').removeClass('show-notification');
},1000);
});
$(".job-listings").on('click', '.fav.item-selected', function() {
$(this).removeClass('item-selected').next('span.notification').addClass('show-notification').html("Goodbye world!");
setTimeout(function(){
$('.show-notification').removeClass('show-notification');
},1000);
});

Answer 5

function callBindEvents()
{
$('.fav').unbind('click');
$('.fav').bind('click', function() {
$(this).addClass('item-selected');
callBindEvents();
});
$('.fav.item-selected').unbind("click");
$('.fav.item-selected').bind('click', function() {
$(this).removeClass('item-selected');
callBindEvents();  
});
}
$( document ).ready(function() {
callBindEvents();
})

第一次添加 onclick 事件时，fav.item-selected 不存在。它是后来添加的，因此您需要在将该类添加到div 后编写 onclick 事件。