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

Question

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

小提琴

的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()上的原始.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。

更新小提琴

 .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> 

Answer 2

正如人们所说的那样， ID必须始终是唯一的，并且如果要使用jquery方式实现ID ，则可以按以下方式进行操作：

 $(document).ready(function() { //bind class element with '.' prefixed $('.box').mouseover(function() { $(this).css('background-color', 'red'); //$(this) refers to current element here }); $('.box').mouseout(function() { $(this).css('background-color', 'blue'); }); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> 

更新

使用hover并在性能方面进行一些改进，可以尝试如下实现：

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).css('background-color', 'red');
  },function(){
      $(this).css('background-color', 'blue');
  });
});

Answer 3

您不能查找具有相同ID的对象，而是可以使用.each jquery函数查找ID为#box的每个div。

看起来像这个小提琴。

小提琴

$(document).ready(function() {
$( "div#box" ).each(function() {
  $( this ).mouseover(function(index) {
      console.log( index + ": " + $( this ).text() );
      $(this).css('background-color', 'red'); 
   });

   $( this ).mouseout(function(index) {
       console.log( index + ": " + $( this ).text() );
      $(this).css('background-color', 'blue'); 
   });
});
});