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()上的原始颜色：

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

Answer 2

正如人们所说 ID必须始终是唯一的，如果你想以jquery方式实现它，那么你可以按照以下方式执行：

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

使用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。

看起来像这个小提琴。

Fiddle

$(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'); 
   });
});
});

对具有多个实例

3 个答案: