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

时间:2017-06-18 16:09:51

标签: javascript jquery html css

这是我想要实现的目标: 我在列表中有四个按钮,每个按钮都有一个白色背景和一个独特的颜色边框。单击一个按钮时,其背景将变为与其边框相同的颜色。单击第二个按钮时,第一个按钮将恢复正常,第二个按钮背景将填充第二个按钮边框颜色。每个按钮的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()方法,因为每个类都需要一个独特的颜色。如果有人有任何建议,那将是很好的 - 这似乎是一个简单的任务,我决心自己实现它,但我已经在这几个小时了!

感谢您的帮助!

3 个答案:

答案 0 :(得分:2)

不需要混合使用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>

答案 1 :(得分:1)

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

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;

}

答案 2 :(得分:1)

这是你在找什么?

&#13;
&#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;
&#13;
&#13;