javascript - 背景が赤い場合のjqueryはエラーを認識せず、簡単に見えますが頑固です

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

なぜなら：

1. 背景（背景色ではなく）を文字列（赤）と比較しています。
2. css('background') と css('backgroundColor') の両方が、要素の現在の背景色の計算された RGB 値を返します。それを文字列と比較しています。

Answer 4

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