Question

我有这样的代码：

 $("#item-1").hover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-1-image").animate({opacity: 1});
    })  

 $("#item-1").mouseout(function() {
    $("#item-1-image").animate({opacity: 0});
 })

我必须重复10次，将所有“item-1”改为“item-2”，“item-3”等。

怎么做？

[编辑]

什么是最好/最短的方式 - 因为实际上我知道如何强制它起作用，但这不是一种优雅的方式;）

Answer 1

您不应该hover()和mouseout()。

.hover()方法接受代表mouseenter和mouseleave的2个函数。

为元素指定一个公共类，然后从ID中提取数字

$(".someClass").hover(function(e) { 
      var num = this.id.split('-').pop();
      e.preventDefault();   
      $("#item-text").stop().animate({marginLeft: "0px"});
      $("#item-" + num + "-image").animate({opacity: 1});
 }, function() {
      var num = this.id.split('-').pop();
      $("#item-" + num + "-image").animate({opacity: 0});
 });

如果由于某种原因无法添加类，则可以执行循环，但需要使用javascript闭包来保留处理程序的索引值。

for(var i = 1; i < 11; i++) {

    (function( num ) {
        $("item-" + i).hover(function(e) { 
              e.preventDefault();   
              $("#item-text").stop().animate({marginLeft: "0px"});
              $("#item-" + num + "-image").animate({opacity: 1});
         }, function() {
              $("#item-" + num + "-image").animate({opacity: 0});
         });
    })( i );

}

Answer 2

悬停事件应该处理过度和完全事件。如果您遇到这些ID，可以使用^=选择以“item - ”开头的ID。

$("div[id^='#item-']").hover(
    function(e) { 
        e.preventDefault();
        $(this).find("p").stop().animate({marginLeft: "0px"});
        $(this).find("img").animate({opacity: 1});
    }, 
    function() {
        $(this).find("img").animate({opacity: 0});
    }
);

最好使用一个css类，因为这些选择器更易于使用。

Answer 3

您可以为每个循环使用常规javascript。

for (var i = 1; i <= 10; i++) {
    $("#item-" + i).hover( ...
}

Answer 4

for (var i=1;i<=10;++i){
  $('#item-'+i).hover(...).mouseout(...);
}

Answer 5

for (var i=1;i<11;i++)
{
 $("#item-"+i).hover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-"+i+"-image").animate({opacity: 1});
    })  

 $("#item-"+i).mouseout(function() {
    $("#item-"+i+"-image").animate({opacity: 0});
 }) 
}

Answer 6

$(".item").hover(function(e) {  
      e.preventDefault();   
    $("#item-text").stop().animate({marginLeft: "0px"});
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 1});
},function() {
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 0});
});

将悬停用于两个事件
使用类和属性，没有带数字的ID

jQuery - 简单的长代码缩短（循环我猜）？

6 个答案: