动态更改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".您只需将更改应用于单击的元素,该元素可通过thisjQuery的事件回调获得:

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

color在构建对象时(如果属性不包含连字符),您还可以省略keys()周围的引号...

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

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

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