javascript - 使用变量将 jQuery 处理程序分配给多个 DIV

Question

我在菜单中有一堆不同的 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");
});
}

但我无法实现它。是否可以？有什么想法吗？

Answer 1

我的方法是使用类选择器或另一个选择器。

 $(".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>