如何处理来自同名多个按钮的事件

我正在研究一个小练习程序，其中有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

如何处理来自同名多个按钮的事件

回答

相关问题