Question

I have the following code that I want to slim down.

    $('#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'); });

I’ve tried this, but it doesn’t work. EDIT: This doesn’t error, just nothing happens.

    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'); });
    }

Thanks in advance

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

Your code is not working because you created closures in the for loop (hover functions are executed later and when that happens they are accessing outer function i variable which is always equal 10 (the loop finished executing)).

more explanation here: http://jibbering.com/faq/notes/closures/

What you can do is trap the value of i inside of another function that will call hover:

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

You can also simply do this:

$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').hover(function() { 
    $('#hiddenMenu'+$(this).attr('id')).css('display', 'block');
},function() { 
    $('#hiddenMenu'+$(this).attr('id')).css('display', 'none'); 
});

or (after your update):

$('ul.siteNav li').hover(function() { 
        $('#hiddenMenu'+$(this).attr('id')).css('display', 'block');
    },function() { 
        $('#hiddenMenu'+$(this).attr('id')).css('display', 'none'); 
    });