.click Funktion, Klasse nach dem Klicken entfernen

Question

Ich habe diese Funktion, wenn ich zum Beispiel ITEM 1 klicken, werden die sample1 und sample3 werden rot, weil diese spezifische Klasse (class1) haben.

Das Problem ist, dass wenn ich auf ein anderes Element (zum Beispiel ITEM2) klicke, die roten Elemente von ITEM1 rot bleiben und ich brauche sie schwarz und markieren in rot nur die Elemente der aktuellen angeklickten Klasse in der ersten Liste . ?

Was unten bereit (function() hinzufügen, um das zu tun Vielen Dank im Voraus

<ul> 
    <li class="leftcol class1">ITEM 1</li> 
    <li class="leftcol class2">ITEM 2</li> 
    <li class="leftcol class3">ITEM 3</li> 
    <li class="leftcol class4">ITEM 4</li> 
</ul> 

<ul> 
    <li class="rightcol class1 class4">sample1</li> 
    <li class="rightcol class2 class3">sample2</li> 
    <li class="rightcol class3 class1">sample3</li> 
    <li class="rightcol class4 class2">sample4</li> 
</ul> 

Dies ist die Funktion:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function() { 
     $('.leftcol').click(function() { 
      $('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');  
     }); 
    }); 
</script> 

Answer 1

Verwenden Sie Klassen die Stile zu halten, und dann entfernen Sie einfach die Klasse auf alle Elemente, und fügen Sie es auf die Elemente zurück, die Klasse usw.

$(document).ready(function() { 
 
    $('.leftcol').click(function() { 
 
    $('.rightcol').removeClass('red') 
 
        .filter('.'+ this.className.split(" ").pop()) 
 
        .addClass('red'); 
 

 
    }); 
 
});

.red {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="leftcol class1">ITEM 1</li> 
 
    <li class="leftcol class2">ITEM 2</li> 
 
    <li class="leftcol class3">ITEM 3</li> 
 
    <li class="leftcol class4">ITEM 4</li> 
 
</ul> 
 

 
<ul> 
 
    <li class="rightcol class1 class4">sample1</li> 
 
    <li class="rightcol class2 class3">sample2</li> 
 
    <li class="rightcol class3 class1">sample3</li> 
 
    <li class="rightcol class4 class2">sample4</li> 
 
</ul>

Answer 2

Haben Sie versucht, eine Variable in dem Sie den Namen der Klasse speichern, von der Sie zuletzt die Farbe geändert haben? So, wann immer Ihre Funktion aufgerufen wird, können Sie die Farbe wieder auf den Standard zurücksetzen und die Variable aktualisieren Eine andere Option wäre, zuerst alle Klassenfarben auf Standard und dann führe die Zeile aus, um das c zu ändern olor zu rot.

Answer 3

passende

Da Sie nicht verwenden Klasse, um Elemente zu stylen, Logik ist dies, bei jedem Klick zurückgesetzt Farbe aller Elemente mit Klasse .rightcol und nach Reset fügen Sie Rot zu einem Sie wollen. Versuchen Sie etwas wie dieses:

$(document).ready(function() { 
$('.leftcol').click(function() { 
$('.rightcol').css('color', 'black'); 
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color',  'red'); 
}); 
});