jQuery的动作具有多个实例
说我有5个的div,所有具有相同样式:jQuery的动作具有多个实例
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()
,但我对如何将它融入到我的功能中毫无头绪。有人可以帮我吗?先谢谢你。
随着人们说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');
});
});
作为一个选项,你也可以在jQuery中使用'hover()',但我认为CSS中的':hover'是这种情况下的最佳候选 – Tushar
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>
你可以不看与同一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');
});
});
});
这是不正确的.. ** id必须是唯一的* *在'DOM'中...你打破了创建'html'的规则,因此为未来的问题开辟了一片空间。 –
**元素的ID必须是唯一的** - 使用类,而不是ID将类似的元素 –
好的,谢谢你的建议,我会尝试一下的时候了!:) –