javascript - jQuery 读取的 CSS 与 jQuery 设置的 CSS 不对应

Question

按下按钮时，我想根据当前是否“选中”来更改按钮的颜色和背景颜色，我正在通过读取当前颜色来检查。

目前，jQuery 用来更新 CSS 的函数似乎没有更新 jQuery 正在读取的 CSS 值。

这是一个演示该问题的 JSFiddle。

JSFiddle

function toggleButton(button) {
  let css = {
    "checked": {
      "background-color": "#609",
      "color": "#fff"
    },
    "unchecked": {
      "background-color": "#ccc",
      "color": "#222"
    }
  }
  button.css("color", "#222") ?
    button.css(css.checked) :
    button.css(css.unchecked)
}

button {
  background-color: #ccc;
  color: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleButton($(this))">Click me</button>

Answer 1

您的第一个问题是您在 if 条件中使用了 css() 的 setter。由于这会返回一个 jQuery 对象，因此它将始终等于 true。

第二个问题是，即使更正了 (button.css('color') == '#222') css() 方法也会返回颜色在 RGB 格式中，因此将它与十六进制值进行比较将始终为 false。

要解决此问题，请切换元素上的类。使用不显眼的事件处理程序而不是过时的 on* 事件处理程序也是更好的做法。这具有解耦 CSS 和 JS 代码的额外好处。试试这个:

$('button').click(function() {
  $(this).toggleClass('foo');
});

button {
  background-color: #ccc;
  color: #222;
}

button.foo {
  background-color: #609;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>