jquery - CSS を動的に変更する

Question

5x5 ボックスのマトリックスを作成しました。リンクをクリックして、クリックした後にそのリンクの色を動的に変更したい (a:visited) - 一度に 1 つずつ。ただし、現在のコードでは、クリックした特定のリンクではなく、すべてのリンクの色が変わります。

HTML:

<ul id="rowOne" class="center">
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
</ul>

Jクエリ:

$('a').click(function(){
$.each('a').css({'color':'#002290'});
});

助言がありますか？

Answer 1

コードには、「いずれか<a>がクリックされると、すべての <a>要素 ( $.each...) を反復処理し、それらの CSS を変更する」と記載されています。this変更は、jQuery のイベント コールバックで使用できる、クリックされた要素にのみ適用する必要があります。

$('a').click(function(){
  $(this).css({'color':'#002290'});
});

オブジェクトを作成するときに、キーを囲む引用符 ( ) を省略することもできます (colorプロパティにハイフンが含まれていない場合)...

$(this).css({color: '#002290'});

... または、単一の属性を設定しているときにオブジェクトを完全に省略し、名前と値を 2 つの別個の文字列パラメーターとして渡します。

$(this).css('color', '#002290');

Answer 2

これを行う必要があります-

$('a').click(function(){
   $(this).css({'color':'#002290'});
});

Answer 3

aもう一度すべてのタグを変更しています。クリックする前にすべてのタグの色を削除することを忘れないでください。

$('a').click(function(){    
   $('a').css('color', '');           
   $(this).css({'color':'#002290'});  //current tag
});