如何在jQuery中循环

Question

我有一些具有类似语法的jQuery函数.

$("#item-1").hover(function(){
    $(".item-1").animate({opacity:1},"slow");
},function(){
    $(".item-1").animate({opacity:0},"slow");
});

$("#item-2").hover(function(){
    $(".item-2").animate({opacity:1},"slow");
},function(){
    $(".item-2").animate({opacity:0},"slow");
});

$("#item-3").hover(function(){
    $(".item-3").animate({opacity:1},"slow");
},function(){
    $(".item-3").animate({opacity:0},"slow");
});

我的问题是如何在循环的帮助下缩短我的代码.我尝试了以下但是没有用:

for (i = 1; i <= 3; ++i) {

  $("#item-" + i).hover(function(){
    $(".item-" + i).animate({opacity:1},"slow");
  },function(){
    $(".item-" + i).animate({opacity:0},"slow");
  });

}

Answer 1

你可以使用jQuery的attributeStartsWith选择器

说明:选择具有指定属性的元素,其值始于给定字符串.

如果您有.item-x classes元素,则以下内容将起作用:

$('[id^="item-"]').hover(function(){
    $("."+this.id).animate({opacity:1},"slow");
},function(){
    $("."+this.id).animate({opacity:0},"slow");
});

否则在我的建议中你可以通过以下方式完成:

$('[id^="item-"]').hover(function(){
    $(this).animate({opacity:1},"slow");
},function(){
    $(this).animate({opacity:0},"slow");
});