javascript - 根据关联的链接更改标题的颜色？每次点击每个 应该只使关联的 h2 变为蓝色

Question

问题是，当我单击另一个链接时，之前的 h2 仍然是蓝色，我想要它，以便 h2 返回到其默认颜色黑色，并且与该链接关联的新 h2 获得该颜色蓝色的。我尝试使用这个我认为可行的 if 语句。

当单击链接时，它会检查 h2 元素的颜色，看看它是否是蓝色，如果是，则应将其更改为黑色以模仿默认值。如果 h2 不是蓝色，则转到 else 语句，该语句应将关联的标题 h2 更改为蓝色。变量“id”存储链接的href，其值与h2的id相同。

    $("aside a").click(function(){

    if($("h2").css("color", "rgb(0,0,255)")){
        $("h2").css({"color" : "black"});
    }else{
    id = $(this).attr("href");
    $(id).css({"color" : "blue", "fontSize" : "150%"});
}
});

我得到了在浏览器中运行的代码。结果应该在页面左侧有一个从 h2s 克隆的链接列表。但我无法让它在 Jsfidle 中运行。但这里是我拥有的所有代码，也许你可以告诉我为什么它不在 jsfidle 中运行，但它在带有 html 脚本标签等的浏览器上运行。 Jsfiddle

回到主要问题，我想知道为什么我的 if 语句不起作用。如果 h2 是蓝色，则应将颜色设置为黑色，否则应将关联的 h2 更改为蓝色。如果单击旁边的另一个链接，则关联的 h2 会更改为蓝色，而所有其他 h2 应该默认为黑色。现在颜色没有变化，为什么？

尽管 js fiddle 不起作用，但它拥有所有 css 和 javascript 信息。 html 部分缺少 html 和 script 标记，因为 jsfiddle 说我不应该将其放入。

BETTER jsFiddle

Answer 1

以这种方式使用类，您只需要使用 .toggleClass，但如果您坚持使用样式...请执行以下操作:

$("aside a").click(function(e){
    e.preventDefault();
    $("h2 a").css('color', 'black');
    var id = $(this).attr('href');
    $(id).css({'color' : 'blue', fontSize: '150%'});
});

更新使用h2 a，因为您的a标签被分配了id，而不是h2标签.