每次用户点击切换CSS类 - jquery

Question

我有2个不同的CSS类的链接。 每次用户点击时如何在两者之间切换？

<a class="class1" id="class1">Class1</a> 
<a class="class2" id="class2">Class2</a> 

这只是工作的一个时间，但是当我点击第二次，这是行不通的：

$("#class1").click(function(){ 
    $("#class1").removeClass().addClass("class2"); 
    $("#class2").removeClass().addClass("class1"); 
}) 

$("#class2").click(function(){ 
    $("#class1").removeClass().addClass("class2"); 
    $("#class2").removeClass().addClass("class1"); 
}) 

的CSS是改变颜色

Answer 1

的方法都在做同样的事情。你为每个标签设置了相同的类，这就是为什么它只能在第一次使用。第二次它重新设置当前班级。 他们不应该像这样吗？

$("#class1").click(function(){ 
    $("#class1").removeClass().addClass("class2"); 
    $("#class2").removeClass().addClass("class1"); 
}) 

$("#class2").click(function(){ 
    $("#class1").removeClass().addClass("class1"); 
    $("#class2").removeClass().addClass("class2"); 
}) 

Answer 2

您可以使用toggleClass来切换多个类..

$('.red,.blue').click(function() { 
 
    $(this).toggleClass('red blue'); 
 
});

.red { background-color:red } 
 
.blue { background-color:blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="red">One</div> 
 
<div class="blue">Blue</div>

Answer 3

您可以使用选择器"[class^=class]"选择其中Element.className以“class”开头的元素;使用参数0, -1的.slice()选择字符串中的字符直到最后一个字符;检查最后一个字符是否为1或2使用==等号运算符;设置相反的最后一个字符匹配1："2"，2："1"在Element.className

$("[class^=class]").click(function() { 
 
    var c = this.className; 
 
    this.className = c.slice(0, -1) + (c[c.length - 1] == 1 ? 2 : 1);  
 
});

.class1 { 
 
    color: blue; 
 
} 
 

 
.class2 { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="class1" id="class1">Class1</a> 
 
<a class="class2" id="clas2">Class2</a>

Answer 4

最后一个字符，当您单击class1一次，它从class1删除类class1，并提出class2上。

但是，当您再次单击它时，因为class1设置为类class2，它不会更改。

你或许应该做这样的事情：

var class1check = 0; 
$("#class1").click(function() { 
    if (class1check === 0) { 
     var addclass1 = "class2"; 
     var addclass2 = "class1"; 
    } 
    else { 
     var addclass1 = "class1"; 
     var addclass2 = "class2"; 
     class1check = 0; 
    } 
    $("#class1").removeClass().addClass(addclass1); 
    $("#class2").removeClass().addClass(addclass2); 
}); 

Answer 5

完成使用toggleClass的jsfiddle：https://jsfiddle.net/kameeshwaran/5puecqeq/

HTML：

<a class="class1" id="class1">Class1</a> 
<a class="class1" id="class2">Class2</a> 

JS

$(document).ready(function(){ 
    $(".class1").click(function(e){ 
     e.preventDefault(); 
     $(this).toggleClass("class2") 
    }); 
}); 

CSS：

.class1{ 
    background-color:green; 
} 
.class2{ 
    background-color:red; 
}