时间戳

首页 > 解决方案 > 我想删除之前添加的课程

jquery - 我想删除之前添加的课程

问题描述

我想在同一个标​​签中删除和添加类。

假设我有一个标签名称：

<button class="a">change class</button>

现在，当我通过选择类选择器单击此按钮时。

$('.a').on('click', function(){
    $(this).addClass('c').removeClass('a');
 });

添加类时。现在我想删除类'c'并添加类'a'。

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

我试过这个。但不工作。

标签： jquery

解决方案

问题是您将点击处理程序连接到.a元素的代码将其直接连接到元素。稍后，当委托.c事件发生时，两个处理程序都会运行。如果您在处理程序中放置断点，您可以看到这一点。在这里，由于您不能在 Stack Snippets 中设置断点，因此我添加了日志记录：

$('.a').on('click', function(){
    console.log("Direct .a handler ran");
    $(this).addClass('c').removeClass('a');
});

$('body').on('click','.c', function(){
    console.log("Delegated .c handler ran");
    $(this).addClass('a').removeClass('c');
});
.a {
    color: blue;
    font-weight: bold;
}
.c {
    color: red;
    font-weight: bold;
}
<button class="a">change class</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.a相反，对and使用委托处理程序.c：

$(document.body).on('click', '.a', function(){
    $(this).addClass('c').removeClass('a');
});

$(document.body).on('click', '.c', function(){
    $(this).addClass('a').removeClass('c');
});

如果您在处理程序中放置断点，您可以看到这一点。在这里，由于您不能在 Stack Snippets 中设置断点，因此我添加了日志记录：

$(document.body).on('click', '.a', function(){
    $(this).addClass('c').removeClass('a');
});

$(document.body).on('click', '.c', function(){
    $(this).addClass('a').removeClass('c');
});
.a {
    color: blue;
    font-weight: bold;
}
.c {
    color: red;
    font-weight: bold;
}
<button class="a">change class</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但请注意，如果您所做的只是切换事件连接代码运行时存在的元素上的类，您可以只使用toggleClass("a c").

推荐阅读