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来改变上每个特定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必须始终唯一而且随着如果你想实现它jquery方式，那么你可以如下做到这一点：

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

UPDATE

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

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

Answer 2

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