动态更改 CSS答案

【问题标题】：Dynamically Changing the CSS动态更改 CSS
【发布时间】：2013-06-11 04:55:50
【问题描述】：

我创建了一个由 5x5 框组成的矩阵。我想点击一个链接并在我点击它后让该链接动态改变颜色（a：visited） - 一次一个。但是，在我当前的代码中，它会将颜色更改为所有链接，而不是我单击的特定链接。

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

有什么建议吗？

【问题讨论】：

$.each('a').css(..) 是多余的——你不需要each()，jquery 会将.css() 应用于所有匹配的元素。
另外（进一步的答案），我建议使用addClass()/removeClass() 而不是直接更改元素的CSS。

标签： jquery css dynamic hyperlink

【解决方案1】：

您的代码显示“当点击任何 <a> 时，迭代所有 <a> 元素 ($.each...) 并更改其 CSS”。您只需将更改应用于单击的元素，可通过 jQuery 事件回调中的 this 获得：

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

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

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

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

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

【讨论】：

在将颜色应用到当前链接之前，我们必须删除以前点击的链接..对吗？？
@Baadshah 也许，但这超出了问题的范围，您正在阅读更多关于问题所要求的问题。

【解决方案2】：

你需要这样做 -

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

【讨论】：

【解决方案3】：

您将再次更改所有a 标签。不要忘记在点击之前删除所有标签颜色。

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

【讨论】：