Question

我正在开展一个小练习计划，我连续有3个白盒子。我的目标是（使用Javascript）当鼠标悬停在盒子上时，任何盒子从白色变为红色，然后当鼠标离开盒子时变为黄色。下面的代码适用于初始框，但不适用于其他两个框。当我将鼠标放在其他盒子上时，它不会改变它们，但它会改变初始盒子的颜色。我看过类似的问题，但大多数涉及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>

Answer 1

您可以使用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将引用调用者元素。

Answer 2

我建议使用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>

Answer 3

根据HTML5规范，id属性在文档中必须是唯一的。 http://www.w3.org/TR/html5/dom.html#the-id-attribute

如果您只是将id属性更改为类属性，则可以使用以下答案并稍微调整一下以执行您想要的操作（将事件从单击更改为鼠标悬停等）。

JavaScript: Event listener for multiple buttons with same class name

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

3 个答案: