.click 函数，点击后删除类答案

【问题标题】：.click function, remove class after clicked.click 函数，点击后删除类
【发布时间】：2016-11-07 11:14:01
【问题描述】：

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

【问题讨论】：

标签： javascript click

【解决方案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>

【讨论】：

【解决方案2】：

由于您没有使用类来设置项目的样式，因此逻辑是这样的，在每次单击时重置所有具有类 .rightcol 的项目的颜色，并在重置后将红色添加到您想要的一个。试试这样的：

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

【讨论】：

【解决方案3】：

您是否尝试过使用一个变量来存储您上次更改颜色的类的名称？因此，无论何时调用您的函数，您都可以将颜色更改回默认值并更新变量。另一种选择是首先将所有类颜色设置为默认值，然后执行该行将颜色更改为红色。

【讨论】：