。點擊功能，點擊後刪除類

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

的問題是，如果我點擊其他項目（例如ITEM2）的ITEM1紅色的物品仍爲紅色，我需要他們變成黑色，並以紅色突出顯示目前唯一被點擊類的項目在第一個列表。？

怎麼才能做到這一點添加到下面就緒（函數（）預先感謝您

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

來源

2016-11-07 Mara Barn

使用類持有的樣式，然後只是刪除所有元素的類，並將其添加回匹配類等

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

來源

2016-11-07 11:19:58 adeneo

您是否嘗試過使用變量在其中存儲上次更改其顏色的類的名稱？因此，只要調用函數，就可以將顏色更改回默認值並更新變量。另一種選擇是首先將所有類的顏色設置爲默認值，然後然後執行該行以更改c olor to red。

來源

2016-11-07 11:19:57 imaginaryfox

元素既然你不使用類風格的項目，邏輯是這樣的，每次點擊重置顏色的所有項目與類.rightcol和復位後添加紅色一個你想要的。試試這樣的：

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

來源

2016-11-07 11:21:30

。點擊功能，點擊後刪除類

回答

相關問題