Переключение класса 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"; используйте .slice() с параметрами 0, -1 для выбора символов в строке до последнего символа; проверьте, является ли последний символ 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; 
}