。点击功能，点击后删除类

Question

我有这个功能，所以如果我点击例如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> 

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

您是否尝试过使用变量在其中存储上次更改其颜色的类的名称？因此，只要调用函数，就可以将颜色更改回默认值并更新变量。 另一种选择是首先将所有类的颜色设置为默认值，然后然后执行该行以更改c olor to red。

Answer 3

元素既然你不使用类风格的项目，逻辑是这样的，每次点击重置颜色的所有项目与类.rightcol和复位后添加红色一个你想要的。试试这样的：

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