用jQuery选择一个节点集合，如下代码 jQuery("#navi_ul li a").not("[id*=current]").eq(0).bind("mouseover",function(){
//doSth();
}我的理解是，选择了#navi_ul li a不包含id为current的a标签节点集合，并取其中的第一个，绑定mouseover事件然后做点事，代码如想象中正常运行了，但是为了减少代码量，要写一个循环，改成下面，就失效了，求大侠指点for (var i = 0; i < 4; i++) {
jQuery("#navi_ul li a").not("[id*=current]").eq(i).bind("mouseover",function(){
//doSth();
}
}
//doSth();
}我的理解是，选择了#navi_ul li a不包含id为current的a标签节点集合，并取其中的第一个，绑定mouseover事件然后做点事，代码如想象中正常运行了，但是为了减少代码量，要写一个循环，改成下面，就失效了，求大侠指点for (var i = 0; i < 4; i++) {
jQuery("#navi_ul li a").not("[id*=current]").eq(i).bind("mouseover",function(){
//doSth();
}
}
本身 for (var i = 0; i < 4; i++) {
jQuery("#navi_ul li a").not("[id*=current]").eq(i).bind("mouseover",function(){ //doSth();
}
}没看出什么毛病
<ul id="navi_ul" class="clear">
<li>
<a id="current" href="#">
<span class="navi_li_label">首页</span>
<span id="home_icon"></span>
</a>
</li>
<li>
<a href="brife.php">
<span class="hoverBg">简介</span>
<span class="navi_li_label">简介</span>
<span id="brife_icon"></span>
</a>
</li>
<li>
<a href="msg.php">
<span class="hoverBg">信息</span>
<span class="navi_li_label">信息</span>
<span id="news_icon"></span>
</a>
</li>
<li>
<a href="album.php">
<span class="hoverBg">相册</span>
<span class="navi_li_label">相册</span>
<span id="photo_icon"></span>
</a>
</li>
</ul>
样式部分就不贴了，js里面用到两站小图，我想要做的是把navilink_array里面四个元素分别与hoverBg_array里面的四个元素对应操作，即navilink_array第i个元素操作hoverBg_array的第i个元素js是
jQuery(function()
{
jQuery(".hoverBg").css("opacity","0.0");
navilink_array=jQuery("#navi_ul a").not("[id*=current]");
hoverBg_array=jQuery("#navi_ul .hoverBg");
for (var i = 0; i < 4; i++) {
jQuery(this).eq(i).bind("mouseover",function(){
hoverBg_array.eq(i).stop();
hoverBg_array.eq(i).css("background","url('images/navi_li_hover.jpg')");
hoverBg_array.eq(i).animate({opacity:"1.0"},"slow");
});
jQuery(this).eq(i).bind("mouseout",function(){
hoverBg_array.eq(i).stop();
hoverBg_array.eq(i).css("background","url('images/navi_li_hover.jpg')");
hoverBg_array.eq(i).animate({opacity:"0.0"},"slow");
});
jQuery(this).eq(i).bind("mousedown",function(){
hoverBg_array.eq(i).css("background","url('images/navi_li_active.jpg')");
hoverBg_array.eq(i).css("background-repeat","no-repeat");
});
}
});
for (var i = 0; i < 4; i++) {
jQuery("#navi_ul li a").not("[id*=current]").eq(i).bind("mouseover",function(){
//doSth();
}
}改成jQuery("#navi_ul li a").not("[id*=current]").each(function(x){
$(this).mouseover(function(){
//dosomething
});
});
我又改成这样的
navilink_array.each(function(i){
jQuery(this).eq(i).bind("mouseover",function(){
hoverBg_array.eq(i).doSth();
});
});
结果是，只有第一个元素的事件成功响应了，后面的元素事件没有成功加上，很奇怪
jQuery("#navi_ul li a").not("[id*=current]").each(function(i){
jQuery(this).bind('mouseover', function(){
hoverBg_array.eq(i).xxx
});
});
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<ul id="navi_ul" class="clear">
<li>
<a href="#">
<span class="hoverBg">首页</span>
<span class="navi_li_label">首页</span>
<span id="home_icon"></span>
</a>
</li>
<li>
<a id="current" href="#">
<span class="navi_li_label">简介</span>
<span id="brife_icon"></span>
</a>
</li>
<li>
<a href="msg.php">
<span class="hoverBg">信息</span>
<span class="navi_li_label">信息</span>
<span id="news_icon"></span>
</a>
</li>
<li>
<a href="album.php">
<span class="hoverBg">相册</span>
<span class="navi_li_label">相册</span>
<span id="photo_icon"></span>
</a>
</li>
</ul>
<script>
jQuery(function()
{
jQuery("#navi_ul a:not(#current)").hover(
function() { $(this).find(".hoverBg").css("color", "red") },
function() { $(this).find(".hoverBg").css("color", "blue") }
).mousedown(function() { $(this).find(".hoverBg").css("color", "green") });
})
</script>
</body>
很简约，受用，不过我的问题还没解决，我实在不懂了，我刚看了jquery并使用到项目中，水平实在很初级
jQuery("#navi_ul a:not(#current)").each(function(index){
jQuery(this).eq(index).hover(function(){
jQuery(this).find(".hoverBg")
.stop()
.css("background","url('images/navi_li_hover.jpg')")
.animate({opacity:"1.0"},"slow");
},function(){
jQuery(this).find(".hoverBg")
.stop()
.css("background","url('images/navi_li_hover.jpg')")
.animate({opacity:"0.0"},"slow");
}).mousedown(function(){
jQuery(this).find(".hoverBg")
.css("background","url('images/navi_li_active.jpg')")
.css("background-repeat","no-repeat");
});
});
结果还是第一个可以用，后面几个时间没响应
var $i=i;
jQuery("#navi_ul li a").not("[id*=current]").eq($i).bind("mouseover",function(){
//doSth();
}
}
应该就可以，js闭包。
jQuery("#navi_ul li a:not([id='current']):lt(4)").each(function(i,o){
//dosomething
})Or
jQuery("#navi_ul li a:not([id='current']):lt(4)").hover(function(){
$(this).stop().css("background","url('images/navi_li_hover.jpg')").animate({opacity:"1.0"},"slow");
},function(){
$(this).stop().css("background","url('images/navi_li_hover.jpg')").animate({opacity:"0.0"},"slow");
})
{
$(".hoverBg").css("opacity","0.5");
navilink_array=$("#navi_ul a").not("[id*=current]");
hoverBg_array=$("#navi_ul .hoverBg");
for (var i = 0; i < 4; i++) {
var obj=hoverBg_array.eq(i);
obj.bind("mouseover",function(){
$(this).stop();
$(this).css("background-color","red");
$(this).animate({opacity:"1.0"},"slow");
});
obj.bind("mouseout",function(){
$(this).stop();
$(this).css("background-color","blue");
$(this).animate({opacity:"0.0"},"slow");
});
}
});
楼主写法有误