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”。您只需将更改应用于单击的元素，该元素可通过jQuery的事件回调中的this获得：

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

在构建对象时，如果属性不包含连字符，也可以省略键（color）周围的引号...

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

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

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

动态更改CSS

3 个答案: