每次用戶點擊切換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; 
}