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>

Answer 2

我建议你给所有的slidemenu一个名为“slidemenu”的课程，然后像这样引用它们：

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

Answer 3

这是可能的，我建议利用事件委派，这样你就不会有大量的事件处理程序：

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

您可以通过使用公共类名来简化它，如果您显示标记，将有一种方法来获取对相应...Box元素的引用，而无需通过ID找到它。

一些参考文献：

另请注意mouseenter和mouseleave的使用。您当前使用的.hover()方法只是它们的简写，但您无法将其与.on()一起使用，因此需要明确地绑定它们。

Answer 4

您可以为这些元素添加公共类吗？

它应该看起来像这样：

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

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

4 个答案: