使用Jquery不会改变颜色

Question

我希望默认的“CSS类”为黑色，并且当使用此选择功能为“已选择”具有白色文本时。我不知道我哪里出错了

$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('selected');
       $(this).addClass('selected');
       $(this).css('color', 'white');
       $(this).addClass('result-holder');
       $(this).css('color', 'black');


   });
});

图片展示了这个问题：

http://imgur.com/AquDa

Answer 1

您正在将其更改为黑色......

  $(this).css('color', 'white');
   $(this).addClass('result-holder');
   $(this).css('color', 'black');  // <====

等于：

var color = 'white';
color = 'black';
alert(color); //black...

Answer 2

以下是您现有的代码，其中说明了点击“link”类的任何锚标记时它的作用：

$('a.link').removeClass('selected');   // remove 'selected' from all links
$(this).addClass('selected');          // add 'selected' to clicked link
$(this).css('color', 'white');         // turn clicked link 'white'
$(this).addClass('result-holder');     // add 'result-holder' to clicked link
$(this).css('color', 'black');         // turn clicked link 'black'

您正在将点击的链接变为白色，然后在同一代码块中将其变回黑色，这样您就永远不会看到它显示为白色。

我很确定你真正想做的事情如下：

$('a.link').removeClass('selected')    // remove 'selected' from all links
           .css('color', 'black');     // and make them black again

$(this).addClass('selected')           // add 'selected' to clicked link
       .css('color', 'white').         // and turn it 'white'

（注意，如果在jQuery对象上调用多个函数，则可以“链接”它们，例如$(this).addClass('selected').css('color','white');)

我无法确切地告诉您要对'result-holder'类做什么，因为您当前的代码会将其添加到点击的链接中，但不会将其从任何内容中删除。如果您想将其添加到点击的链接中，请像您已经做的那样$(this).addClass('result-holder')。

请注意，您只需将color:white;添加到“已选定”的课程定义中，然后在默认的color:black;样式中设置a.link即可简化此操作：

a.link {
   color : black;
}    

a.selected {
   /* your existing style settings here, then: */
   color : white;
}

以下是演示：http://jsfiddle.net/nnnnnn/6qURY/