Question

我有以下代码，我试图压缩到 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();
  }
);
}

Answer 1

不需要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" );
});

Answer 2

如何为所有div提供一个运动子类，然后执行

$(".motion-sub").hover(function() {
    $(this).show() }, function() { $(this).hide(); }
});

Answer 3

您在motion1-sub1-x div

之前的div选择器上错过了一个空格

 $("motion1-sub1-" +  i + " div")

试图将javascript浓缩为for循环

3 个答案: