Question

我无法使我的其他声明发挥作用。如果背景颜色为红色，我想将背景颜色从红色更改为蓝色，如果背景颜色为蓝色，我想将其更改为红色。我不明白为什么下面的代码不起作用，有人可以帮忙吗？

＆＃13;

        $(".box").css({
          "background-color": "red"
        });
        $(".box").click(function() {
          if ($(".box").css({
            "background-color": "red"
          })) {
            $(".box").css({
              "background-color": "blue"
            });
          } else {
            $(".box").css({
              "background-color": "red"
            });
          }
        });

＆＃13;

.box {

  height: 100px;

  width: 100px;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
</head>

<body>

    <div class="box"></div>

</body>

</html>

＆＃13;

Answer 1

问题是你的if条件，.css()方法，当以setter格式使用时，返回jQuery对象，这就是为什么else部分不被执行的原因。

如果您想比较background-color，则需要使用getter .css()版if($(".box").css('background-color') == 'red')，rgb，但浏览器返回的颜色属性值将依赖于浏览器（某些浏览器可能会返回hexa值的toggleClass()值），因此比较它可能并不总是有效。

这里的一个简单解决方案是使用css类来设置元素样式并使用red切换它们，在下面的代码片段中我们将背景颜色box分配给clicked类，然后blue类将颜色覆盖为toggleClass，然后我们使用$(".box").click(function() { $(this).toggleClass("clicked"); });在点击元素时添加/删除该类。

＆＃13;

.box {
  height: 100px;
  width: 100px;
  background-color: red;
}
.box.clicked {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="box"></div>

＆＃13;

thin.c: In function ‘main’:
thin.c:9:5: error: unknown type name ‘SDL_Window’
     SDL_Window *window;                    // Declare a pointer
     ^
thin.c:14:5: warning: implicit declaration of function ‘SDL_CreateWindow’ [-Wimplicit-function-declaration]
     window = SDL_CreateWindow(
     ^
thin.c:16:9: error: ‘SDL_WINDOWPOS_UNDEFINED’ undeclared (first use in this function)
         SDL_WINDOWPOS_UNDEFINED,           // initial x position
         ^
thin.c:16:9: note: each undeclared identifier is reported only once for each function it appears in
thin.c:20:9: error: ‘SDL_WINDOW_OPENGL’ undeclared (first use in this function)
         SDL_WINDOW_OPENGL                  // flags - see below
         ^
thin.c:35:5: warning: implicit declaration of function ‘SDL_DestroyWindow’ [-Wimplicit-function-declaration]
     SDL_DestroyWindow(window);

＆＃13;

Answer 2

只需检查css属性background-color

的值

var color =  $(".box").css( "background-color" );

这是完整的代码

        $(".box").css({
          "background-color": "red"
        });
        $(".box").click(function() {
          var color =  $(".box").css( "background-color" );
          if ( color == "rgb(255, 0, 0)" ) {
            $(".box").css({ "background-color": "blue" });
          } else {
            $(".box").css({ "background-color": "red" });
          }
        });

.box {

  height: 100px;

  width: 100px;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
</head>

<body>

    <div class="box"></div>

</body>

</html>

如果else语句Jquery帮助简单

2 个答案: