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

【问题标题】：Assign jQuery handler to multiple DIV using variables使用变量将 jQuery 处理程序分配给多个 DIV
【发布时间】：2012-07-25 20:03:07
【问题描述】：

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

但我不能把它拉下来。是否可以？有什么想法吗？

【问题讨论】：

或者您可以使用类和 dom 层次结构来完成大部分工作。
阅读 JavaScript 闭包 stackoverflow.com/questions/111102/…
@Kevin B ：这就是我最终对以下答案所做的事情。出于某种原因，我并没有真正考虑到这一点，而是直奔 ID 和大量混乱。谢谢您的意见！ Musa：以前没听说过关闭。我将不得不阅读该链接...

标签： javascript jquery variables html hover

【解决方案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>

【讨论】：

这非常有效。所以基本上你只是告诉他在属于这个slideMenu的slideMenuBox上做悬停。非常感谢！

【解决方案2】：

我建议你给所有的幻灯片菜单一个名为“slidemenu”的类，然后像这样引用它们：

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

【讨论】：

【解决方案3】：

这是可能的，我建议您利用事件委托，这样您就没有大量的事件处理程序：

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

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

一些参考资料：

还要注意mouseenter 和mouseleave 的使用。您当前使用的 .hover() 方法只是它们的简写，但您不能将它与 .on() 一起使用，因此需要显式绑定到两者。

【讨论】：

感谢您的意见。我会看看这些链接。

【解决方案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']")

【讨论】：

这就是我在你的几分钟前基于几乎完全相同的答案而最终做的事情。非常感谢您的意见！ :)