javascript - .click 函数，点击后删除类

Question

我有这个功能，所以如果我点击例如 ITEM 1，sample1 和 sample3 将变成红色，因为有那个特定的类( class1).

问题是，如果我点击另一个项目(例如 ITEM2)，ITEM1 的红色项目将保持红色，我需要它们变成黑色并突出显示红色只有第一个列表中当前点击类的项目。

要在 ready(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>