jquery - 动态改变CSS

Question

我创建了一个 5x5 盒子的矩阵。我想单击一个链接，并在单击它后让该链接动态改变颜色(a:访问过) - 一次一个。但是，在我当前的代码中，它更改了所有链接的颜色，而不是我单击的特定链接的颜色。

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>

Jquery:

$('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'});

...或者在设置单个属性时完全省略该对象并将名称和值作为两个单独的字符串参数传递:

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