.click関数をクリックした後にクラスを削除する

Question

私はこの関数を持っていますので、例えばITEM 1をクリックすると、その特定のクラス（class1）を持っているのでsample1とsample3が赤くなります。

問題は、別のアイテム（たとえば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から赤まで。

Answer 3

に一致する要素でそれをバックに追加しますクラスをスタイルのスタイルにするには、ロジックはこれで、クリックするたびにclass .rightcolを持つすべてのアイテムのリセットカラーが設定され、リセット後には赤が1つ追加されます。次のように試してみてください：

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