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

这里就是我想要实现：我在列表中有四个按钮，每个按钮都有一个白色的背景和独特的颜色边框。当单击一个按钮时，其背景将变为与其边框相同的颜色。当第二个按钮被点击时，第一个按钮返回到正常状态，第二个按钮背景被第二个按钮边框颜色填充。每个按钮都有id为“NAVX”，其中X是从1到4使用Javascript和JQuery来改变CSS属性：JQuery不能改变Javascript已经改变的属性？

一些我一直在使用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，我卡住实现以下两件事之一：

当一个按钮被点击时，它ge永久卡住填充背景。继续点击按钮套牢所有按钮填写完成。
当点击一个按钮，所有按钮获得带有白色背景permantently卡住。

我真的不知道是怎么回事，以实现这一目标。我似乎无法找到不相互覆盖的CSS级别的正确组合。我没有使用过jQuery的addClass（）方法，因为每个类都需要一个独特的颜色。如果任何人有任何建议，那将会很棒 - 这似乎是一个简单的任务，我决心自己实现这个目标，但我现在已经持续了好几个小时了！

感谢您的帮助！

来源

2017-06-18 Jonathan

附注（不解决您的问题）：你不需要这样的：'的document.getElementById（navItem.id）'，'navItem'就已经是元素你正在通过。 –

啊，是的，我绝望的残余在明确宣布的东西希望一些神奇的解决方案。 – Jonathan

一类添加到按钮，例如“彩色按钮”，然后你把颜色的按钮，这样做：

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; 
 

 
}

来源

2017-06-18 16:20:20

可能是一个愚蠢的问题，但我可以结合jQuery和JavaScript的单一功能一样，如果使用一个单独的js文件？我希望保持尽可能多的东西分开，我。e，html，javascript，css都在不同的文件中。 – Jonathan

是的，你可以。但是你必须先加载jQuery文件，然后加载你的。请标记为已接受，如果这可以帮助您：D –

Hrmm，它仍然产生我在我的文章中描述的第一个结果 - 按钮不会返回到白色背景。我曾经尝试过这个解决方案。我删除了链接到我单独的.js文件，并将其全部放入

这是你是什么寻找？

/* 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; 
 
}

<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>

来源

2017-06-18 16:32:50 Gerard

是的。你介意一点它是如何工作的？我其实还没有自己去探索ajax。 – Jonathan

在源代码中完成 – Gerard

没有必要的jQuery，香草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>

来源

2017-06-18 16:38:10 Andreas

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

回答

相关问题