.click函數，點擊后刪除類

Question

我有這個功能，所以如果我點擊例如ITEM 1 ， sample1和sample3將變為紅色，因為有特定的類（ class1 ）。

問題是，如果我點擊另一個項目（例如ITEM2 ）， ITEM1的紅色項目將保持紅色，我需要它們變為黑色，並在紅色突出顯示第一個列表中當前點擊的類的項目。

添加到下面准備好了什么（function（）才能做到這一點？提前謝謝！

<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>

這是功能：

<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

使用類來保存樣式，然后只刪除所有元素上的類，並將其添加回與類匹配的元素等

 $(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

由於您沒有使用類來設置項目樣式，因此邏輯就是這樣，在每次單擊重置顏色時，使用類.rightcol重置所有項目，並在重置后將紅色添加到您想要的項目。 嘗試這樣的事情：

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

Answer 3

您是否嘗試過使用一個變量來存儲上次更改其顏色的類的名稱？ 因此，無論何時調用函數，您都可以將顏色更改回默認值並更新變量。 另一種選擇是首先將所有類顏色設置為默認值，然后執行該行以將顏色更改為紅色。