JavaScript循环

Question

我有以下代码,我想减肥.

    $('#1').hover(function() { $('#hiddenMenu1').css('display', 'block'); },
            function() { $('#hiddenMenu1').css('display', 'none'); });
    $('#2').hover(function() { $('#hiddenMenu2').css('display', 'block'); },
            function() { $('#hiddenMenu2').css('display', 'none'); });
    $('#3').hover(function() { $('#hiddenMenu3').css('display', 'block'); },
            function() { $('#hiddenMenu3').css('display', 'none'); });
    $('#4').hover(function() { $('#hiddenMenu4').css('display', 'block'); },
            function() { $('#hiddenMenu4').css('display', 'none'); });
    $('#5').hover(function() { $('#hiddenMenu5').css('display', 'block'); },
            function() { $('#hiddenMenu5').css('display', 'none'); });
    $('#6').hover(function() { $('#hiddenMenu6').css('display', 'block'); },
            function() { $('#hiddenMenu6').css('display', 'none'); });
    $('#7').hover(function() { $('#hiddenMenu7').css('display', 'block'); },
            function() { $('#hiddenMenu7').css('display', 'none'); });
    $('#8').hover(function() { $('#hiddenMenu8').css('display', 'block'); },
            function() { $('#hiddenMenu8').css('display', 'none'); });
    $('#9').hover(function() { $('#hiddenMenu9').css('display', 'block'); },
            function() { $('#hiddenMenu9').css('display', 'none'); });
    $('#10').hover(function() { $('#hiddenMenu10').css('display', 'block'); },
            function() { $('#hiddenMenu10').css('display', 'none'); });

我试过这个,但它不起作用.编辑:这不是错误,只是没有任何反应.

    for (i = 1; i <= 10; i++) {
        var id = '#' + i.toString();
        var menu = '#hiddenMenu' + i.toString();
        $(id).hover(function() { $(menu).css('display', 'block'); },
                function() { $(menu).css('display', 'none'); });
    }

提前致谢

编辑:HTML

<div id="ctl00_divMenu" class="dynamicMenu">
    <ul class="siteNav">
        <li id="1"></li>
        <li id="2"></li>
        <li id="3"></li>
        <li id="4"></li>
        <li id="5"></li>
        <li id="6"></li>
        <li id="7"></li>
        <li id="8"></li>
        <li id="9"></li>
        <li id="10"></li>
    </ul>
    <div id="hiddenMenu1" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    <div id="hiddenMenu2" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    <div id="hiddenMenu3" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    ...
    <div id="hiddenMenu10" class="hiddenMenu">...</div>
</div>

Answer 1

我给他们一个共同的课,然后立刻绑定他们.

$('.commonClass').hover(function(e) {
   $('#hiddenMenu' + this.id).toggle(e.type === 'mouseenter');
}):

如果我知道HTML结构,那么它可以进一步优化(事件委托,转换等)

编辑:新代码(使用事件委托),因为您已经给我们HTML结构 -

$('.siteNav').delegate('mouseenter mouseleave', 'li', function(e) {
  $('#hiddenMenu' + this.id).toggle(e.type === 'mouseenter');
});