1

我有以下代码，我试图将其压缩为for 循环，但没有运气：

$("#motion1-sub1-1").hover( function () {
$("#motion1-sub1-1 div").show();
  }, 
  function () { $("#motion1-sub1-1 div").hide();
  }
);
$("#motion1-sub1-2").hover( function () {
$("#motion1-sub1-2 div").show();
  }, 
  function () { $("#motion1-sub1-2 div").hide();
  }
);
$("#motion1-sub1-3").hover( function () {
$("#motion1-sub1-3 div").show();
  }, 
  function () { $("#motion1-sub1-3 div").hide();
  }
);
$("#motion1-sub1-4").hover( function () {
$("#motion1-sub1-4 div").show();
  }, 
  function () { $("#motion1-sub1-4 div").hide();
  }
);
$("#motion1-sub1-5").hover( function () {
$("#motion1-sub1-5 div").show();
  }, 
  function () { $("#motion1-sub1-5 div").hide();
  }
);

这是必须压缩上述代码的for 循环代码：

for (var i = 1; i <= 5; i++) {
 $("motion1-sub1-" +  i).hover( function () { $("motion1-sub1-" +  i + "div").show();
  }, 
  function () { $("motion1-sub1-" +  i + "div").hide();
  }
);
}
4

3 回答 3

3

不需要 for 循环，只需绑定到具有特定 id 模式的元素，并使用this从悬停函数中引用它们：

$("[id^='motion1-sub1-']").hover(
    function(){
        $("div", this).show();
    },
    function(){
        $("div", this).hide();
    }
);

我不知道我们要绑定什么类型的元素，但是您应该将该标签作为选择器的一部分提供。例如，如果这是div我们正在悬停的，请修改选择器以包括：

$("div[id^='motion1-sub1-']")

或者更短、更干的版本：

$("[id^='motion1-sub1-']").on("mouseenter mouseleave", function(e){
    $("div", this).toggle( e.type === "mouseenter" );
});
于 2012-06-05T04:36:24.527 回答
3

给你所有的 div 一个motion-sub 类然后做

$(".motion-sub").hover(function() {
    $(this).show() }, function() { $(this).hide(); }
});
于 2012-06-05T04:37:04.183 回答
0

您在motion1-sub1-x div选择器之前缺少一个空格div

 $("motion1-sub1-" +  i + " div")
于 2012-06-05T04:39:48.450 回答