我在菜单中有一堆不同的 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");
});
}
但我无法实现它。是否可以?有什么想法吗?
最佳答案
我的方法是使用类选择器或另一个选择器。
$(".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>
关于javascript - 使用变量将 jQuery 处理程序分配给多个 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11657715/