Question

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

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

这是一个证明这个问题的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>

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

1 个答案: