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-']")

または、さらに短く、よりDRYバージョン：

$("[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 に答える