Question

我想在同一标签中删除并添加课程。

假设我有一个标签名称：

[
'my-app',
'command',
'arg1',
'arg2',
'arg3=val1', // or `arg3   =val1` is fine as well
'arg4=val2', // or `arg4 = val2` is fine as well
]

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

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

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

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

我尝试过了。但不起作用。

Answer 1

问题是您的代码将点击处理程序与.a元素挂钩，将其直接挂钩至该元素。稍后，当发生委托.c事件时，两者处理程序都将运行。您可以看到是否在处理程序中放置了断点。在这里，由于您无法在堆栈片段中执行断点，因此我添加了日志记录：

$('.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和.c都使用委托处理程序：

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

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

您可以看到是否在处理程序中放置了断点。在这里，由于您无法在堆栈片段中执行断点，因此我添加了日志记录：

$(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")。

Answer 2

尝试此操作在类之间切换。

使用toggleClass。

$('.a').click(function(){
    $(this).toggleClass('c a')
});

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

Answer 3

一种将最后添加的类删除到

的方法

通过创建类字符串

添加类

和

从字符串的最后删除一个类，然后再次将字符串更新为元素。

另一种方法是将最后添加的类添加为元素中的“ last-class”属性

，然后在需要删除类之后，获取“ last-class”属性值，并使用removeClass（）从元素中删除类。

我想删除以前添加的课程

3 个答案: