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

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

1 个答案: