javascript - 使用递增变量时 jquery 循环不起作用

Question

我试图多次循环一个函数，但由于某种原因它不起作用。有人看到问题了吗？

这行得通

 <script>
 $(document).ready(function() {     
    $('.menuitem0').hover(function(){     
        $('.boxitem0').addClass('box_hover');  

    },     
    function(){    
        $('.box_item0').removeClass('box_hover');     
    });
}});  
</script>

但是当我尝试循环它时它不起作用

 <script>
 $(document).ready(function() {     
 for(var i = 0; i < 10; i++) {
    $('.menuitem'+i).hover(function(){     
        $('.box_item'+i).addClass('box_hover');  

    },     
    function(){    
        $('.box_item'+i).removeClass('box_hover');     
    });
}});  
</script>

Answer 1

悬停回调执行时，循环结束，i 始终为 10

你需要一个闭包

$(document).ready(function() {     
 for(var i = 0; i < 10; i++) {
    (function(k) {
        $('.menuitem'+k).hover(function(){     
            $('.box_item'+k).addClass('box_hover');  

        },     
        function(){    
            $('.box_item'+k).removeClass('box_hover');     
        });
    }
}}); 

更好的方法是定位正确的元素，并且根本不使用循环，例如属性以选择器开头，并假设框在菜单内

$(document).ready(function() {     
    $('[class^="menuitem"]').hover(function(){     
        $('.box_item', this).addClass('box_hover');  
    },     
    function(){    
        $('.box_item', this).removeClass('box_hover');     
    });
});