0

メニューには、さまざまなことに影響を与えるさまざまな DIV がたくさんありますが、それらはすべて「番号」によって関連付けられています。それらをすべて分離したときに完全に機能しますが、すべての For および While ループの試行が失敗しました...「$(document).ready(function () {});」の間にホバーが適用されます...

ここのコードをクリーンアップして、これを変更しようとしています:

$("#slideMenu1").hover(function () {
  $("#slideMenu1Box").slideToggle("fast");
});

$("#slideMenu2").hover(function () {
  $("#slideMenu2Box").slideToggle("fast");
});

$("#slideMenu3").hover(function () {
  $("#slideMenu3Box").slideToggle("fast");
});

$("#slideMenu4").hover(function () {
  $("#slideMenu4Box").slideToggle("fast");
});

次のようなものに：

for(var i = 1; i < 5; i++) {    
$("#slideMenu"+i).hover(function () {
  $("#slideMenu"+i+"Box").slideToggle("fast");
});
}

しかし、私はそれをやってのけることはできません。出来ますか？何か案が？

4

4 に答える 4

3

私が行う方法は、クラスセレクターまたは別のセレクターを使用することです。 

 $(".slideMenu").hover(function() {
   $(".slideMenuBox", this).slideToggle("fast")
 });
 .slideMenu{
   display:block;
   height:20px;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideMenu1" class="slideMenu">
  <div id="slideMenuBox1" class="slideMenuBox">
    Menu1
  </div>
</div>
<div id="slideMenu2" class="slideMenu">
  <div id="slideMenuBox2" class="slideMenuBox">
    Menu2
  </div>
</div>

于 2012-07-25T20:08:57.163 に答える
2

それは可能です。イベント デリゲーションを利用することをお勧めします。これにより、イベント ハンドラーを大量に使用する必要がなくなります。

$("#someAncestor").on("mouseenter mouseleave", "[id^=slideMenu]", function () {
    $("#" + this.id + "Box").slideToggle("fast");
});

共通のクラス名を使用することでこれを簡素化できます。マークアップを表示すると...Box、ID で検索せずに適切な要素への参照を取得する方法があります。

参考文献:

mouseenterとの使用にも注意してくださいmouseleave。現在使用しているメソッドはそれらの.hover()省略形ですが、 では使用できないため.on()、両方に明示的にバインドする必要があります。

于 2012-07-25T20:08:42.880 に答える
2

すべてのスライド メニューに「slidemenu」というクラスを指定してから、次のように参照することをお勧めします。

$(".slideMenu").hover(...);
于 2012-07-25T20:07:17.933 に答える
0

これらの要素に共通のクラスを追加できますか?

実際には次のようになります。

<html>
    <div class="slideMenu" option="1">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="2">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="3">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="4">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="5">
        <div class="slideMenuBox"></div>
    </div>
</html>

次に、イベント ハンドラーをそれらすべてに適用できます。

$(".slideMenu").hover( 
    function()
    {
        $(".slideMenuBox", this).slideToggle("fast");
    }
);

また、必要に応じて個別に参照することもできます。

$(".slideMenu[option='1']")
于 2012-07-25T20:17:09.063 に答える