使用 jQuery 更改 DIV 背景颜色答案

【问题标题】：Changin DIV background color with jQuery使用 jQuery 更改 DIV 背景颜色
【发布时间】：2017-01-03 13:50:47
【问题描述】：

我有两个 DIV，我想在单击它时将 DIV 颜色更改为绿色（它的工作）。我在计算 div 上的点击次数，如果 DIV 已经是绿色，我想停止计算。

var counter = 0;
$(function() {
  $(".tile").click(function() {
    if ($(this).css('background-color') == 'rgb(250,0,0)') {
      $(this).css('background-color', '#008000');
      counter++;
      $(this).append("/" + counter);
    } else {
      alert("Already colored!");
    }
  });
});

div {
  width: 90vh;
  height: 10vh;
  margin: auto;
  border: 3px solid black;
  padding: 25px 25px 25px 25px;
  background-color: rgb(250, 0, 0);
  display: table-cell;
}

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

所以，如果背景是红色 (250,0,0) 然后将 div 重新着色为绿色并将 div 文本更改为 1。但是如果 div 不是红色（所以已经着色），并且如果我单击绿色 div 然后显示警报消息。任何想法我该如何解决？我猜我的 IF 是错误的。

【问题讨论】：

如果你 console.log($(this).css('background-color')) 你会看到值中有空格：rgb(250, 0, 0)
我不会依赖 rgb 字符串在不同引擎之间保持一致。在点击时添加一个类可能是一个更安全的选择。
@Rory McCrossan 已编辑，但仍然什么都不做。还有其他提示吗？
你在哪里添加的？它工作正常：jsfiddle.net/01jvwf13。尽管我同意@KilianStinson 的观点，即 RGB 字符串的格式不是很可靠，但我会使用一个类来为元素着色。
好的，谢谢，在 JSFiddle 中工作，但在我的 PhPstorm 中没有，它的大声笑 :D Nvm，我会将 RBG 更改为类 coloros，谢谢大家:)

标签： javascript jquery html css colors

【解决方案1】：

当您想要添加/删除样式时使用 CSS 类：

CSS

.red-bg
{
   background-color: red;
}

.green-bg
{
   background-color: green;
}

Javascript

if ($(this).hasClass('red-bg'))
{
    $(this).removeClass('red-bg')
           .addClass('green-bg');
}

【讨论】：

你可以做toggleClass('red-bg green-bg')