jQuery 只会在点击时执行 if/else 语句中的 'if'

Question

我是 jQuery 的新手，刚刚尝试了不同的东西，试图让自己变得更舒服。我在这里遇到了一个问题，尽管寻找了很长时间的答案，但一直没有解决它。

我发现 if/else 语句只会执行 'if'。所以在点击时，正方形变成黑色，但之后它似乎不再接受任何点击以变回蓝色。

我发现很多建议都是尝试 .on('click', function(){，但这并没有改变任何东西。我还尝试了另一种方式，我看到有人写了 css (({'background-color':'blue'}))，但这也没有帮助。

我知道这可能是一个非常简单的答案，但如前所述，我是新手。我真的很感激任何帮助。

谢谢。

$(document).ready(function(){
$('button').click(function () {
    if ($('.square').css('background-color', 'blue')) {
    $('.square').css('background-color', 'black');
    } else {
        $('.square').css('background-color', 'blue');
    }
});
});

&css

.square {
width: 100px;
height: 100px;
margin: 50px auto; 
background-color: blue;
}

&html

<div class="square"></div>
<button>click</button>

Answer 1

if ($('.square').css('background-color') === 'blue') {
    $('.square').css('background-color', 'black');
} else {
    $('.square').css('background-color', 'blue');
}

由于 JQuery 链的工作方式，您的 if 语句 returning JQuery 选择 $('.square')，并且由于对象是真实的，if 语句总是求值而不是 else 语句。您的函数不是比较这两个值，而是将 'blue' 赋值给 background-color。此更正获取 background-color 的值并将其与 'blue' 进行比较，如果它们匹配，则评估 if 语句。

这里是关于 $().css() 的文档，解释了两个函数调用之间的区别，下面是这段代码的演示：

colorsEqual.canvas = document.createElement('canvas');
colorsEqual.canvas.width = colorsEqual.canvas.height = 1;
colorsEqual.context = colorsEqual.canvas.getContext('2d');

function colorsEqual(color1, color2){
  colorsEqual.context.fillStyle = color1;
  colorsEqual.context.fillRect(0, 0, 1, 1);
  
  var data1 = colorsEqual.context.getImageData(0, 0, 1, 1).data;
  
  colorsEqual.context.fillStyle = color2;
  colorsEqual.context.fillRect(0, 0, 1, 1);
  
  var data2 = colorsEqual.context.getImageData(0, 0, 1, 1).data;
  
  return (
    data1[0] == data2[0] &&
    data1[1] == data2[1] &&
    data1[2] == data2[2] &&
    data1[3] == data2[3]
  );
}

$(document).ready(function(){
  $('button').click(function () {
    if (colorsEqual($('.square').css('background-color'), 'blue')) {
      $('.square').css('background-color', 'black');
    } else {
      $('.square').css('background-color', 'blue');
    }
  });
});

.square {
  width: 100px;
  height: 100px;
  margin: 50px auto; 
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button>click</button>

EDIT 结果发现另一个问题是 getComputedStyle 的工作方式。它不一定 return CSS 属性它的创作方式，因为它依赖于浏览器，我在上面的代码片段中添加了一种方法来正确比较所有 HTML5使用 Canvas API.

的兼容浏览器

第二次编辑 我提供了一种更简单的比较颜色值的方法，不需要下面代码段中的 Canvas API。这更好，因为它不依赖于 HTML5 合规性。

$(document).ready(function(){
  $('button').click(function () {
    var $div = $('<div/>').addClass('square');
    $(document.body).append($div);
    if ($('.square').css('background-color') === $div.css('background-color')) {
      $('.square').css('background-color', 'black');
    } else {
      $('.square').css('background-color', 'blue');
    }
    $div.remove();
  });
});

.square {
  width: 100px;
  height: 100px;
  margin: 50px auto; 
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button>click</button>

Answer 2

您需要检查元素的颜色值，现在您正在获取返回的对象，并且您需要背景 css 值。

根据 jquery .css 文档，返回的 css 的颜色值可以改变。

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

Chrome、safari 和 firefox 都 returns 颜色为 rgb，但由于浏览器 returns 一个错误的值，测试总是有可能失败。

更好的方法是切换 css 类，这是更改正方形颜色的更安全的方法，因为它不依赖于浏览器。

$(document).ready(function() {
  $('button').click(function() {
    $('.square').toggleClass("blue black");
  });
});

.square {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.blue {
  background-color: blue;
}
.black {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square blue"></div>
<button>click</button>

jQuery 只会在点击时执行 if/else 语句中的 'if'

jQuery will only execute 'if' of if/else statement on click

jquery

if-statement

click