jquery 类名删除或添加

Question

<i id="caret" class="caret_bottom"></i>

如何单击 caret 事件
然后把caret_bottom改为caret_top

<i id="caret" class="caret_top></i>

再然后单击 caret事件 改为

<i id="caret" class="caret_bottom"></i>

要用三目运算符或者if

i=$("#caret");
i.click(function(){
        ???
}

Answer 1

最简单的一个思路
先判断class内容
再设定

我觉得你还是把普通if/else写法写会再来考虑三目

Answer 2

i=$("#caret");
i.click(function(){
   $(this).hasClass("caret_bottom")?$(this).removeClass("caret_bottom").addClass("caret_top"):$(this).removeClass("caret_top").addClass("caret_bottom");
});

Answer 3

//一般会直接有个默认的样式 然后只是切换有无caret_top样式
$("#caret").click(function(){

 $(this).toggleClass('caret_top');

});

//你这个的话 可以按下面这种方式判断
$("#caret").click(function(){

 if($(this).hasClass('caret_top')) {
     $(this).addClass('caret_bottom').removeClass('caret_top');
 } else {
     $(this).addClass('caret_top').removeClass('caret_bottom');
 }

});

Answer 4

缓存$(this)更好