適用於相同元素類型的多個實例的Onclick函數

-1

Javascript newb here。適用於相同元素類型的多個實例的Onclick函數

我想練習的Javascript，並希望重新沿着什麼在這個例子做了線的東西： Change Button color onClick

不過，我想被應用到多個「按鈕」這個動作（輸入），所以只要單擊一個按鈕，該按鈕和該按鈕就會改變顏色。

我重新創建了上面的例子，我認爲可以容納多個按鈕，但點擊任何一個按鈕都會改變第一個按鈕的顏色。

這將是大大讚賞如果有人可以解釋/舉一些按鈕的行爲獨立的例子。

來源

2015-06-17 Myles Malloy

您可以發佈您的代碼 – urnotsam

這將工作：

與關注好的分離（你應該避免混合HTML javascript代碼）
，而無需使用外部庫（如jQuery的）

<html> 
 
<head> 
 
    <script> 
 
    function init() { 
 
     var buttons = document.querySelectorAll('input[type=button]'); 
 

 
     [].forEach.call(buttons, function(button) { 
 
     button.addEventListener('click', function(e) { 
 
      e.target.style.backgroundColor = e.target.getAttribute('data-color'); 
 
     }); 
 
     }); 
 

 
    } 
 
    </script> 
 
</head> 
 

 
<body onload="init()"> 
 
    <input type="button" value="button" style="color:white" data-color="#101010" /> 
 
    <input type="button" value="button" style="color:white" data-color="#bada55" /> 
 
    <input type="button" value="button" style="color:white" data-color="#400400" /> 
 
</body> 
 
</html>

來源

2015-06-17 20:10:42

真棒，謝謝你 - 這就是我對我所期待的。我現在意識到，我忘了提及，我也希望按鈕再次點擊時切換到原來的顏色。我似乎無法在此評論中以任何身份進行格式化，所以我會告訴您我做了什麼，但我認爲這樣做會工作，但沒有......我添加了有條件的「if」語句邏輯「，如果按鈕已經具有數據顏色屬性，則將其背景更改爲原始顏色」。有沒有簡單的方法來做到這一點？ –

當然，你可以檢查'e.target.style.backgroundColor ===「」'（空字符串）。如果它爲空，則表示不應用內聯樣式。反之亦然：如果你想清除內聯樣式，只需設置'e.target.style.backgroundColor =「」';） –

從採取快速看一下這個例子，你應該能夠通過這樣

<input type="button" id="button1" value = "button" style= "color:white" onclick="setColor('button1', '#101010')";/> 

<input type="button" id="button2" value = "button" style= "color:white" onclick="setColor('button2', '#101010')";/>

設置顏色更改任何給定的按鈕的顏色正在採取兩個參數第一個是按鈕ID。所以我們將每個按鈕的唯一ID傳遞給函數。在這種情況下，button1和button2

來源

2015-06-17 20:03:51 urnotsam

您需要在javascript中使用this聲明。這將改變實際點擊的元素的屬性。

下面是一個例子：

var main = function() {   
    $('.button').click(function() { 
     $(this).css('background-color' : 'red'); 
    }); 
};

來源

2015-06-17 20:06:09 James

當然你需要的jQuery爲 –

適用於相同元素類型的多個實例的Onclick函數

回答

相關問題