Javascript 如何使我的JQuery代码在多个ID'；s

我有以下代码来显示和隐藏悬停时的菜单项：

jQuery( "#menu-item-11215" ).hover(
    function() {
        jQuery('#menu-item-11215 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11215 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11233" ).hover(
    function() {
        jQuery('#menu-item-11233 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11233 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11211" ).hover(
    function() {
        jQuery('#menu-item-11211 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11211 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11268" ).hover(
    function() {
        jQuery('#menu-item-11268 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11268 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11243" ).hover(
    function() {
        jQuery('#menu-item-11243 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11243 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11239" ).hover(
    function() {
        jQuery('#menu-item-11239 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11239 .sub-menu').hide();
    }
);

有没有一种方法可以触发JQuery来处理任何有子ID的ID，而不是一次又一次地重复相同的代码？下面是其中一个的相关HTML代码。它们的设置方式都相同：

<ul class="fusion-megamenu fusion-megamenu-row-2 fusion-megamenu-row-columns-1 fusion-megamenu-border">
    <li id="menu-item-11215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-megamenu-submenu fusion-megamenu-columns-1 col-lg-12 col-md-12 col-sm-12">
        <h3 class='fusion-megamenu-title'>
            <a href="http://someurl">Families &#038; Individuals</a>
        </h3>

        <ul class="sub-menu">
            <li id="menu-item-11275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Tax &#038; Advisory
                </a>
            </li>
            <li id="menu-item-11277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Trust &#038; Estates
                </a>
            </li>
        </ul>
    </li>
</ul>

---

如何使这更通用以保存代码行？

减少您必须做的一切：

jQuery( "ul.fusion-megamenu > li" ).hover(
    function(){
        jQuery(this).find('ul.sub-menu').show();
    },
    function(){
        jQuery(this).find('ul.sub-menu').hide();
    }
);

---

通过使用

jQuery（this）.find（）

只搜索相对于您悬停在上面的列表的列表。

减少所需的一切：

jQuery( "ul.fusion-megamenu > li" ).hover(
    function(){
        jQuery(this).find('ul.sub-menu').show();
    },
    function(){
        jQuery(this).find('ul.sub-menu').hide();
    }
);

---

通过使用

jQuery（this）.find（）

只搜索与悬停列表相关的列表。

然后只需在

elm

中传入元素，并显示

show

或

hide

   function MyToggle(elm,set){
      if(set=="show"){
        $(elm+' .sub-menu').show();
      }else{//hide
        $(elm+' .sub-menu').hide();
      }
    }

---

然后只需传入

elm

中的元素，然后将

show

或

hide

   function MyToggle(elm,set){
      if(set=="show"){
        $(elm+' .sub-menu').show();
      }else{//hide
        $(elm+' .sub-menu').hide();
      }
    }

使用此选择器：

$（'[id^=“menu item”]”）

对每个具有

id

的项目执行操作，这些项目从

菜单项开始

在您的函数中，它将是
$（'.sub-menu'，this）

jQuery（'[id^=“菜单项”]'）。悬停(
函数（）{
jQuery（'.sub menu'，this）.show（）；//使用此选择器：
$（“[id^=“menu item”]”）
对每个具有
id
的项执行操作，该项从
菜单项开始

在您的函数中，它将是
$（'.sub-menu'，this）

jQuery（'[id^=“菜单项”]'）。悬停(
函数（）{
jQuery（'.sub menu'，this）.show（）；//如果确实需要根据id查找每个元素，请将它们放入逗号分隔的字符串中，如下所示


menuitems=“#菜单项-11215，#菜单项-11233”；
jQuery（menuitems）.悬停(
函数（）{
$（this.children（“.sub-menu”）.show（）；
},
函数（）{
$（this.children（“.sub-menu”）.hide（）；
}
)如果确实需要根据id查找每个元素，请将它们放入逗号分隔的字符串中，如下所示


menuitems=“#菜单项-11215，#菜单项-11233”；
jQuery（menuitems）.悬停(
函数（）{
$（this.children（“.sub-menu”）.show（）；
},
函数（）{
$（this.children（“.sub-menu”）.hide（）；
}
)
有许多方法可以重构此代码以减少重复。其中大多数与jQuery无关，但与JavaScript语言本身有关。例如：

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

for(var i=0; i<itemNumbers.length; i++){
    var menuItem = jQuery("#menu-item-" + itemNumbers[i]);
    var subMenu = menuItem.find(".sub-menu");
    menuItem.hover(subMenu.show, subMenu.hide);
}

var itemNumbers=[
"11215",
"11233",
"11211",
"11268",
"11243",
"11239"
];
对于（var i=0；i有许多方法可以重构此代码以减少重复。其中大多数与jQuery无关，但与JavaScript语言本身有关。例如：

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

for(var i=0; i<itemNumbers.length; i++){
    var menuItem = jQuery("#menu-item-" + itemNumbers[i]);
    var subMenu = menuItem.find(".sub-menu");
    menuItem.hover(subMenu.show, subMenu.hide);
}

var itemNumbers=[
"11215",
"11233",
"11211",
"11268",
"11243",
"11239"
];
对于（var i=0；这是类的点，将所有的
菜单项更改为类
。菜单项
，并使用
此
为您所在的项设置一个
悬停
事件。这是类的点，将所有
菜单项更改为类
使用
此
事件悬停
您所使用的物品。您缺少一些引号。@SpencerWieczorek Tanks。我也忘了一些引号。您缺少一些引号。@SpencerWieczorek Tanks。我也忘了一些逗号。这是我见过的这个问题的最佳解决方案，因为它不需要任何其他东西来工作比“ul.fusion-megamenu>li”语句更简单。你能解释一下该语句到底在做什么吗？当然，它只选择子元素（不是任何子元素，只选择子列表项）使用fusion megamenu类的列表。我本可以使其超级具体化，并使用
ul.fusion megamenu.fusion-megamenu-row-2.fusion-megamenu-row-columns-1.fusion megamenu border
，但我认为这可能有点过火了。这是我见过的这个问题的最佳解决方案，因为它不需要任何其他东西来工作而不是“ul.fusion-megamenu>li”语句。你能给我解释一下该语句到底在做什么吗？当然，它只选择作为子元素的列表元素（不是任何子元素，只选择子列表项）使用fusion megamenu类的列表。我本可以使其超级具体，并使用
ul.fusion megamenu.fusion-megamenu-row-2.fusion-megamenu-row-columns-1.fusion megamenu border
，但我认为这可能有些过分。