分配jQuery的處理程序，以多種使用DIV變量

我已經在影響不同的東西菜單一堆不同的DIV的，但他們都用「數字」有關。它完美的作品時，我把它們都分開，但所有的for和while循環的嘗試失敗...懸停在一個過程中應用「$（文件）。就緒（函數（）{}）;」 ......分配jQuery的處理程序，以多種使用DIV變量

我只是想在這裏清理代碼，並改變這一點：

$("#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"); 
}); 
}

，但我不能把它關閉。可能嗎？任何想法？

來源

2012-07-25 Tommy Gagnon

或者您可以使用類和dom層次結構來完成大部分工作。 – 2012-07-25 20:07:15

閱讀JavaScript閉包http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Musa 2012-07-25 20:09:59

@Kevin B：這就是我最終做的下面的答案。出於某種原因，我真的不認爲，徑直的ID和巨大的混亂。謝謝您的意見！穆薩：沒有聽說過關閉之前。我必須閱讀該鏈接... – 2012-07-25 20:26:06

的方式我想它是使用類選擇或其他選擇做。

$(".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-25 20:08:57 XhkUnlimit

這工作完美。所以基本上你只是告訴他做屬於這個slideMenu的slideMenuBox上的懸停。非常感謝！ – 2012-07-25 20:24:22

我建議你給你所有的slidemenu的是一個名爲「slidemenu」類，然後引用它們是這樣的：

$(".slideMenu").hover(...);

來源

2012-07-25 20:07:17 Chris

這是可能的，我建議趁着事件委派的，所以你不必事件處理程序的負載：

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

你完全可以簡化，通過使用一個共同的類名稱，如果你顯示你的標記，就會有一種方式來獲得到相應的...Box元素的引用而不受ID找到它。

一些參考：

還要注意使用mouseenter和mouseleave。您目前使用的方法.hover()只是簡寫他們，但你不能用.on()，因此需要用它來綁定到兩個明確。

來源

2012-07-25 20:08:42

感謝您的意見。我會檢查這些鏈接。 – 2012-07-25 20:23:01

你可以添加一個普通類這些元素？

它應該是這個樣子：

<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-25 20:17:09

這就是我在你的前幾分鐘基於幾乎完全相同的答案而做的。非常感謝您的意見！ :) – 2012-07-25 20:27:39

分配jQuery的處理程序，以多種使用DIV變量

回答

相關問題