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

使用类来保存样式，然后只删除所有元素上的类，并将其添加回与类匹配的元素等

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

Installed Apps

Answer 2

由于你没有使用类来设置项目样式，所以逻辑就是这样，在每次单击重置时，使用类.rightcol重置所有项目的颜色，并在重置后将红色添加到你想要的颜色。尝试这样的事情：

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

Answer 3

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

.click函数，点击后删除类

3 个答案: