点击更改背景颜色

Question

以下是我的Jquery代码：

$("#test").click(function() {
      if($(this).css("background-color")=="#FFFFFF") 
         $(this).css("background-color","blue");
     else
         if($(this).css("background-color")=="blue")
              $(this).css("background-color","#FFFFFF");
    });

以下是HTML代码：

<div id="test">
    click me!
</div>

您能解释一下为什么它不工作吗？

非常感谢

http://jsfiddle.net/m73faf4g/

- Unknown developer

---

$(this).css("background-color") == rgb(255,255,255) - 就是这样。 - tymeJV

警告($(this).css("background-color")); 并查看它是否真的是 ffffff。 - u_mulder

@u_mulder，警告不是调试工具 :) - Wilfredo P

哈哈，@WilfredoP 真的是这样。 - eg_dac

Answer 1

您还忘记在fiddle中包含JQuery

更新的Fiddle

$(function(){
    $('#test').click(function() {
       if($(this).css('background-color') == 'rgb(255, 255, 255)')
          $(this).css('background-color', 'blue');
       else
          if($(this).css('background-color') == 'rgb(0, 0, 255)')
              $(this).css('background-color', '#FFFFFF');
    });
});

---

编辑

如果您希望的话，还有另一种方式：

.blue {
    background-color: blue !important;
}

$(function(){
    $('#test').click(function() {
        $(this).toggleClass('blue');
    });
});

Alternative Fiddle

- scniro

---

哈哈，你比我快。我正在点击他的小提琴，然后注意到$未定义。 - eg_dac

Answer 2

use it like this:

$("#test").click(function() {
    if($(this).css("background-color")=="rgb(255, 255, 255)") 
        $(this).css("background-color","blue");
    else
        if($(this).css("background-color")=="rgb(0, 0, 255)")
            $(this).css("background-color","#FFFFFF");
});

原因是css()函数返回rgb格式的颜色，这不符合您的条件。

- neo

Answer 3

创建一个切换函数，不依赖于颜色，因为返回的样式在不同浏览器中可能会不一致，这取决于它们是否支持rgb/rgba/hsl等。

$("#test").on('click', function() {

    var flag = $(this).data('flag');

    $(this).css('background-color', flag ? '#fff' : 'blue');

    $(this).data('flag', !flag);
});

FIDDLE

的翻译内容为：

FIDDLE

。

- adeneo