Question

如何点击添加和删除jQuery类？我需要.other-class不受影响。

所以当你点击.other-class.one时，它会变成.other-class.two。如果单击.other-class.two，它将变为.other-class.one。

这是我到目前为止所做的第二次JS负载工作。

<p class="other-class one">Trigger</p>

.one {
  background: red;
}
.two {
  background: blue;
}
.other-class {
    text-decoration: underline;
}

$('.one').click(function(){
    $(this).removeClass('one');
    $(this).addClass('two');
});

$('.two').click(function(){
    $(this).removeClass('two');
    $(this).addClass('one');
});

Answer 1

您需要使用 event delegation ：

$('body').on('click','.one',function(){
 $(this).removeClass('one').addClass('two');
});

$('body').on('click','.two',function(){
 $(this).removeClass('two').addClass('one');
});

Answer 2

在这种情况下，您可以使用toggleClass（），但作为此类动态选择器方案的常规解决方案，您应该使用event delegation

＆＃13;

$('.one, .two').click(function() {
  $(this).toggleClass('one two');
});

＆＃13;

.one {
  background: red;
}
.two {
  background: blue;
}
.other-class {
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="other-class one">Trigger</p>

＆＃13;

为什么呢？因为在正常事件委托模型中，选择器仅在执行注册代码时被评估一次，所以在您的示例中，只有第一个处理程序被添加到p元素，因此执行单击第一个处理程序的次数< / p>

Answer 3

$(body).on('click', '.other-class' function() {
    $(this).toggleClass('one two');
});

Answer 4

我假设您正在寻找切换效果。您可以将事件分配给＆＃34; common＆＃34;类，然后切换。像这样：

$('.other-class').click(function(){
    if($(this).hasClass('one'))
        $(this).removeClass('one').addClass('two');
    else
        $(this).removeClass('two').addClass('one');
});

Here is a working example

使用jQuery添加和删除类

4 个答案: