Question

我是jQuery的新手，刚刚玩过不同的东西，试着让自己变得更舒服。我在这里遇到了一个问题，尽管在很长一段时间内寻找答案，但我还没有运气。

我发现if / else语句只会执行＆＃39; if＆＃39;。因此，在点击时，方块变为黑色，但之后它似乎不再接受任何更改为蓝色的点击。

我发现很多建议都是尝试.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语句返回了$('.square')的JQuery选择，并且由于对象是真实的，因此始终会评估if语句而不是else语句。您的功能不是比较两个值，而是将'blue'分配给background-color。此更正获取background-color的值，并将其与'blue'进行比较，如果匹配则评估if语句。

以下是$().css()的文档，解释了两个函数调用之间的区别，以下是此代码的演示：

＆＃13;

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');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

编辑事实证明另一个问题是getComputedStyle的工作方式。它并不一定以创作的方式返回CSS属性，因为它依赖于浏览器，我在上面的代码片段中添加了一种方法，可以在所有使用Canvas API的HTML5兼容浏览器中进行正确比较。

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

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

根据jquery .css文档，返回的css的颜色值可能会发生变化。

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，计算的维度样式几乎总是像素，但它们可以在样式表中指定为em，ex，px或％。不同的浏览器可能会返回逻辑上但文本上不相同的CSS颜色值，例如#FFF，＃fffffff和rgb（255,255,255）。

Chrome，safari和firefox都将颜色返回为rgb，但由于浏览器返回错误的值，测试失败的可能性总是很大。

更好的方法是切换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只会执行＆＃39; if＆＃39;点击

2 个答案: