javascript - 使用 Javascript 和 JQuery 改变 CSS 属性 : JQuery cannot alter properties that Javascript has already altered?

Question

这是我要实现的目标:我在列表中有四个按钮，每个按钮都有白色背景和独特的彩色边框。单击一个按钮时，其背景颜色将与其边框颜色相同。单击第二个按钮时，第一个按钮恢复正常，第二个按钮的背景填充第二个按钮的边框颜色。每个按钮都有 ID“navX”，其中 X 是 1 到 4 之间的数字。

我一直在混合使用 jQuery 和 javascript 来实现这一点。我试图在单击时使用 jQuery 将所有按钮背景设置为白色，并尝试使用 javascript 填充单击按钮的背景。这是因为我知道 jQuery 允许您收集所有具有公共(public) ID 字符串的元素:

$('[id^=nav]').css({"background":"#FFFFFF", "color":"#000000"});

在使用 javascript 的同时，我可以将点击的 ID 和颜色参数传递给函数:

<a id="nav1" onclick="changeHeaderColour(this, '#f0e442')"> Button 1 </a>

function changeHeaderColour(navItem, newColor) {

document.getElementById(navItem.id).style.backgroundColor = newColor;
document.getElementById(navItem.id).style.color = newColor;

}

我一直在尝试将这些组合起来的混合方式，改变要使用的选择器，以及篡改核心 CSS，但我无法实现以下两个目标之一:

• 单击按钮时，它会永久卡在填充背景中。继续点击按钮完成，所有按钮都被卡住。
• 单击按钮时，所有按钮都会永久卡在白色背景中。

我真的不知道还有什么办法可以做到这一点。我似乎无法找到不会相互覆盖的 CSS 级别的正确组合。我没有使用 jQuery 的 addClass() 方法，因为每个类都需要一种独特的颜色。如果有人有任何建议，那就太好了 - 这似乎是一项简单的任务，我决心自己完成它，但我已经做了几个小时了!

感谢您的帮助!

Answer 1

不需要混合使用 jQuery、vanilla JS 和内联脚本。

$("a.button").on("click", function(ev) {
  ev.preventDefault();

  // "reset" the background color of all "buttons"
  $("a.button").css("background-color", "");

  // change the background color of the clicked button to the same color as its border
  var button = $(this);
  button.css("background-color", button.css("border-color"));
});

a.button {
  background-color: #fff;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

#nav1 { border-color: #f00 }
#nav2 { border-color: #0f0 }
#nav3 { border-color: #00f }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="nav1" class="button">Button 1</a>
<a id="nav2" class="button">Button 2</a>
<a id="nav3" class="button">Button 3</a>