我想在同一标签中删除并添加课程。
假设我有一个标签名称:
[
'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');
});
我尝试过了。但不起作用。
答案 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()从元素中删除类。