javascript - 对具有多个实例的每个单个元素的 jQuery 操作

Question

假设我有 5 个 div，它们都具有相同的样式:

Fiddle

HTML

<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>

CSS

#box {
    background-color:blue;
    width:200px;
    height:50px;
    display:block;
    margin-top:10px;
}

我想执行一些 jQuery 以更改 .mouseover() 上每个特定 div 的颜色，并在 .mouseout() 上将其改回原始颜色>:

jQuery

$(document).ready(function() {
   $('#box').mouseover(function() {
      $('#box').css('background-color', 'red'); 
   });

    $('#box').mouseout(function() {
      $('#box').css('background-color', 'blue'); 
   });
});

这只适用于 div 的第一个实例，我将如何使它适用于每个单独的实例？我希望每个 div 都能按自己的方式工作，但我不知道该怎么做。

我研究并发现了有关 .each() 的信息，但我对如何将其合并到我的函数中一无所知。有人可以帮帮我吗？提前谢谢你。

Answer 1

ID 必须唯一。

您可以对所有元素使用相同的类。当您可以在 CSS 中使用 :hover 来更改悬停时元素的样式时，就不需要使用 Javascript。

Updated Fiddle

.box {
  background-color: blue;
  width: 200px;
  height: 50px;
  display: block;
  margin-top: 10px;
}
.box:hover {
  background: red;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>