使用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已經改變的屬性？

回答

相關問題