如何處理來自同名多個按鈕的事件

我正在研究一個小練習程序，其中有3個白色框連續排列。我的目標是（使用Javascript）將鼠標放在盒子上的任何盒子從白色變成紅色，然後當鼠標脫離盒子時變爲黃色。下面的代碼適用於初始方框，但不適用於其他兩方。當我將鼠標放在其他盒子上時，它不會改變它們，但它確實會改變inital盒子上的顏色。我看過類似的問題，但其中大多數涉及jQuery，我不使用。我已經做了一些研究，可能的解決方案可能涉及使用addEventListener或使用「this」。我不想給按鈕ID以不同的名稱，並根據它們編寫額外的過程 - 這樣做效率不高。我知道必須有更有效的方法。任何建議表示讚賞。如何處理來自同名多個按鈕的事件

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Whiteboxes 5</title> 
    <script type="text/javascript">  
    function changeColorOnMouseOver() 
    { 
    var control=document.getElementById("btn"); 
    control.style.background='red'; 
    } 
    function changeColorOnMouseOut() 
    { 
    var control=document.getElementById("btn"); 
    control.style.background='yellow'; 
    } 
    </script> 
    <link rel="stylesheet" href="css/app5.css"> 
    </head> 
    <body> 

    <input type="button" value="" id="btn" 
     onmouseover="changeColorOnMouseOver()" 
     onmouseout="changeColorOnMouseOut()"/> 

    <input type="button" value="" id="btn" 
     onmouseover="changeColorOnMouseOver()" 
     onmouseout="changeColorOnMouseOut()"/> 

    <input type="button" value="" id="btn" 
     onmouseover="changeColorOnMouseOver()" 
     onmouseout="changeColorOnMouseOut()"/> 

    </body> 
</html>

來源

2015-06-15 NJDave

你不能有相同的'id'多個元素。 – brroshan

可以使用this參考，像這樣：

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Whiteboxes 5</title> 
    <script type="text/javascript">  
    function changeColorOnMouseOver(control) 
    { 
     control.style.background='red'; 
    } 
    function changeColorOnMouseOut(control) 
    { 
     control.style.background='yellow'; 
    } 
    </script> 
    <link rel="stylesheet" href="css/app5.css"> 
    </head> 
    <body> 

    <input type="button" value="" id="btn1" 
     onmouseover="changeColorOnMouseOver(this)" 
     onmouseout="changeColorOnMouseOut(this)"/> 

    <input type="button" value="" id="btn2" 
     onmouseover="changeColorOnMouseOver(this)" 
     onmouseout="changeColorOnMouseOut(this)"/> 

    <input type="button" value="" id="btn3" 
     onmouseover="changeColorOnMouseOver(this)" 
     onmouseout="changeColorOnMouseOut(this)"/> 

    </body> 
</html>

在HTML中的ID應該是唯一的。沒有2個元素應該具有相同的ID。 this將引用調用者元素。

來源

2015-06-15 20:12:19 brso05

該死的，正是我準備的JS小提琴:) http://jsfiddle.net/9Lpshea1/ – blex

@blex現在我不必做一個笑聲謝謝... – brso05

非常感謝您的回覆。這有效，它幫助我看到如何使用「this」將當前元素傳遞給函數。 – NJDave

我推薦使用jQuery並將ID更改爲CLALL。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html class="no-js" lang="en"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <title>Whiteboxes 5</title> 
 
    <script type="text/javascript">  
 
    $(document).ready(function(){ 
 
     $(".btn").hover(function(){ 
 
     $(this).css("background-color","red"); 
 
     },function(){ 
 
     $(this).css("background-color","yellow"); 
 
     }); 
 
    }); 
 
    </script> 
 
    <link rel="stylesheet" href="css/app5.css"> 
 
    </head> 
 
    <body> 
 

 
    <input type="button" value="" class="btn"/> 
 

 
    <input type="button" value="" class="btn"/> 
 

 
    <input type="button" value="" class="btn"/> 
 

 
    </body> 
 
</html>

來源

2015-06-15 20:14:03

感謝您的回覆。當我開始學習jQuery時，我會回顧一下。 – NJDave

每HTML5規範，ID屬性必須在文檔中是唯一的。 http://www.w3.org/TR/html5/dom.html#the-id-attribute

如果你只需要改變的ID屬性類的屬性，可以使用下面的答案，並調整它一點點地做你想做的（事件從點擊切換到鼠標懸停等）。

JavaScript: Event listener for multiple buttons with same class name

來源

2015-06-15 20:37:01 JesseDahl

如何處理來自同名多個按鈕的事件

回答

相關問題