javascript - jquery if background is red 不识别错误，看起来很简单但很顽固

Question

http://jsfiddle.net/TcSQ8/31/

为什么这个小提琴不起作用？有趣的..

$(document).ready(function(){
  $(".box").click(function(){
      if ($(".box").css("background-color") == "red")
      {
          $(".box").html("Success!");
      }
  });
});

Answer 1

为什么这个小提琴不起作用？

很多原因。

1) CSS 属性background不是background-color

2)background-color不是red但rgb(255, 0, 0)

工作代码：

$(document).ready(function(){
  $(".box").click(function(){

      if ($(".box").css("background-color") == "rgb(255, 0, 0)")
      {
          $(".box").html("Success!");
      }
  });
});

工作 Jsfiddle 链接

---

旁注：调试console.log()比使用方便得多alert()

旁注（2）：您可以调试 if 语句。在你的情况下，这样的测试可以解决这个问题。

console.log($(".box").css("background") == "red")

Answer 2

如果您只想比较颜色，请获取background-color. 之后，在您的条件下使用 rgb 代码，它就可以工作了。

$(document).ready(function(){
  $(".box").click(function(){
      if ($(".box").css("background-color") == "rgb(255, 0, 0)")
      {
          $(".box").append("Success!");
      }
  });
});

Answer 3

$(document).ready(function(){
  $(".box").click(function(){
      alert($(".box").css("background-color"));
      if ($(".box").css("background-color") == "rgb(255, 0, 0)")
      {
          $(".box").html("Success!");
      }
  });
});

Answer 4

因为：

1. 您正在将背景（而不是背景颜色）与字符串（红色）进行比较。
2. css('background') 和 css('backgroundColor') 都将返回元素当前背景颜色的计算 rgb 值。您正在将其与字符串进行比较。