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

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

javascript jquery variables html

Javascript 使用变量将jQuery处理程序分配给多个DIV,javascript,jquery,variables,html,hover,Javascript,Jquery,Variables,Html,Hover,我在菜单中有一堆不同的div，它们影响着不同的事物，但它们都由一个“数字”联系在一起。当我将它们全部分离，但所有For和While循环尝试都失败时，它可以完美地工作。。。悬停在“$（document）.ready（function（）{}）；”期间应用我只是想清理一下这里的代码，并修改一下： $("#slideMenu1").hover(function () { $("#slideMenu1Box").slideToggle("fast"); }); $("#slideMenu2").

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

（变量i=1；i<5；i++）的


$（“#slideMenu”+i）.悬停（函数（）{
$（“#slideMenu”+i+“Box”）.slideToggle（“快速”）；
});
}

但我做不到。可能吗？有什么想法吗？

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

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

<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>

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

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

您可以通过使用公共类名来简化这一点，如果您显示标记，那么将有一种方法可以获得对相应

…Box

元素的引用，而无需通过ID找到它

一些参考资料：

还要注意使用

mouseenter

和

mouseleave

。您当前使用的

.hover（）

方法只是它们的简写，但您不能将其与

.on（）

一起使用，因此需要显式地绑定两者。

我的方法是使用类选择器或其他选择器。

$（“.slideMenu”）.hover（函数（）{
$（“.slideneubox”，此）.slideToggle（“快速”）
});
.slideMenu{
显示：块；
高度：20px；
}

菜单1
菜单2
您能为这些元素添加一个公共类吗
它应该看起来像这样：
$(".slideMenu").hover(...);

<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[option='1']")

或者你可以使用类和dom层次结构来完成大部分工作。由于某种原因，我没有认真考虑过，直奔IDS和大规模混乱。谢谢你的意见！穆萨：以前没听说过关门。我要读那个链接…谢谢你的输入。我将查看这些链接。这非常有效。所以基本上你只是告诉他在属于这个slideMenu的slideMenuBox上做悬停。谢谢！这就是我最后所做的，基于你几分钟前几乎完全相同的答案。非常感谢您的投入！：）