Question

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

我一直在使用jQuery和javascript来实现这一目标。我试图在点击时使用jQuery将所有按钮背景设置为白色并尝试使用javascript填充点击的按钮背景。这是因为我知道jQuery允许你用一个共同的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>

Answer 2

在按钮中添加一个类，例如“彩色按钮”，然后在按钮中放置颜色，执行以下操作：

function changeHeaderColour(navItem, newColor) {
$(".colored-button").css({"background":"#FFFFFF", "color":"#000000"}); //Remove whatever colors may be setted in any of these buttons and apply the desired style to the clicked element.

document.getElementById(navItem.id).style.background = newColor;
document.getElementById(navItem.id).style.color = newColor;

}

Answer 3

这是你在找什么？

＆＃13;

/* Detection of a click event for a button */
$(document).on("click", "button", function() {
  resetButtons();
/* Retrieve the border color from clicked button */  
  var borderColor = $(this).css("border-color");
/* Assign border color to background */
  $(this).css("background-color", borderColor);
});

/* Reset buttons to default */
function resetButtons() {
/* White background, black characters */
  $("button").css({
    "background": "white",
    "color": "black"
  });
  /* Color set for buttons 1 - 4 */
  $("#nav1").css("border", "medium solid red");
  $("#nav2").css("border", "medium solid darkgreen");
  $("#nav3").css("border", "medium solid darkgray");
  $("#nav4").css("border", "medium solid orange");
  return false;
}

＆＃13;

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

＆＃13;

使用Javascript和JQuery来改变CSS属性：JQuery不能改变Javascript已经改变的属性？

3 个答案: