我想删除以前添加的课程

时间:2019-06-10 06:43:16

标签: jquery

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

假设我有一个标签名称:

[
'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');
 });

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

3 个答案:

答案 0 :(得分:2)

问题是您的代码将点击处理程序与.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")

答案 1 :(得分:1)

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

使用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>

答案 2 :(得分:0)

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

的方法

通过创建类字符串

添加类

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


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

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