Entfernen Sie alle Klassen von mehreren Objekten, wenn Sie eine Reset-Taste drücken

Question

Hallo Ich habe eine Frage, die alle Klassen zurückgesetzt, wenn Sie eine Taste drücken. Ich habe den folgenden HTML-Setup:

<a class="test testclass">Test 1</a> 
<a class="test testclass">Test 2</a> 
<a class="test testclass">Test 3</a> 

<a class="reset_all_classes">RESET ME</a> 

Mit dem folgende jQuery:

$('.test').click(function(){ 
    $(this).toggleClass('testclass testclass-active'); 
}) 

// Reset by removing all the testclass-active on all the <a> 
$('.reset_all_classes').click(function(){ 
    $('.test').toggleClass('testclass-active testclass'); 
}) 

Jedes Mal, wenn ich einen Hyperlink enthält die Klasse drücke test dann die Klasse: testclass wird in testclass-active geändert werden. Das Problem liegt innerhalb, wenn Sie zum Beispiel Test 1 und Test 3 ausgewählt haben. Beide haben die testclass-active dann, wenn ich die Reset-Taste drücken alle diese Hyperlinks werden in den Standardzustand zurück: testclass. Aber im Gegensatz Button 2 wird die testclass-active

Also ich frage mich, wie könnte ich die Situation erreichen, wo die Tasten: test1 und test3 die Klasse testclass-active haben und wenn ich die Reset-Taste drücken alle Schaltflächen auf ihre Standardklasse zurückkehren: testclass.

JSFIDDLE HERE

Answer 1

Problem mit Ihrem Code

Wann immer Sie das Element klicken, die Klassen geändert. Während Sie Ihren Code zurücksetzen, wird umgeschaltet. So geht es nicht in den Ausgangszustand.

Lösung

Statt toggleClass() ich removeClass() und addClass() verwendet, um die Elemente zu machen den Anfangszustand versetzt.

$('.reset_all_classes').click(function(){ 
    $('.test').removeClass('testclass-active').addClass('testclass'); 
}) 

Working Demo

Answer 2

$('.test').click(function() { 
 
    $(this).toggleClass('testclass testclass-active'); 
 
}) 
 

 
// Reset by removing all the testclass-active on all the <a> 
 
$('.reset_all_classes').click(function() { 
 
    $('.test').removeClass("testclass-active").addClass("testclass"); 
 
})

.testclass, 
 
.reset_all_classes, 
 
.testclass-active { 
 
    display: block; 
 
    width: 100px; 
 
    padding: 5px 10px; 
 
    background-color: lightblue; 
 
    margin: 20px; 
 
    cursor: pointer; 
 
} 
 
.testclass-active { 
 
    background-color: green; 
 
} 
 
.reset_all_classes { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="test testclass">Test 1</a> 
 
<a class="test testclass">Test 2</a> 
 
<a class="test testclass">Test 3</a> 
 

 
<a class="reset_all_classes">RESET ME</a>

Answer 3

Demo

$('.reset_all_classes').click(function(){ 
    $('.test').removeClass('testclass-active').addClass('testclass'); 
}) 

Dont Knebel nur Klasse hinzufügen und entfernen Klasse wissen Sie was, was hinzuzufügen und

Answer 4

$('.test').click(function(){ 
 
\t $(this).toggleClass('testclass testclass-active'); 
 
}) 
 
    
 
// Reset by removing all the testclass-active on all the <a> 
 
$('.reset_all_classes').click(function(){ 
 
\t $('.test').removeClass('testclass-active'); 
 
    $('.test').addClass('test testclass'); 
 
}) 
 
\t \t

.testclass, .reset_all_classes, .testclass-active{ 
 
    display:block; 
 
    width:100px; 
 
    padding:5px 10px; 
 
    background-color:lightblue; 
 
    margin:20px; 
 
    cursor:pointer; 
 
} 
 

 
.testclass-active{ 
 
    background-color:green; 
 
} 
 

 
.reset_all_classes{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="test testclass">Test 1</a> 
 
<a class="test testclass">Test 2</a> 
 
<a class="test testclass">Test 3</a> 
 

 
<a class="reset_all_classes">RESET ME</a>