Javascript 不允许缩短for循环中的某些重复代码？

我正试图减少我拥有的JS数量，我不知道为什么我不被允许以我正在尝试的方式来做这件事。这是图像上一些mouseover/mouseout函数的代码：

$(document).ready(function() {
    $("#social_btn_1").on('mouseover', function(){
        $(this).attr('src', 'images/social_1_dwn.png');
    })
    $("#social_btn_1").on('mouseout', function(){
        $(this).attr('src', 'images/social_1.png');
    })

    $("#social_btn_2").on('mouseover', function(){
        $(this).attr('src', 'images/social_2_dwn.png');
    })
    $("#social_btn_2").on('mouseout', function(){
        $(this).attr('src', 'images/social_2.png');
    })

    $("#social_btn_3").on('mouseover', function(){
        $(this).attr('src', 'images/social_3_dwn.png');
    })
    $("#social_btn_3").on('mouseout', function(){
        $(this).attr('src', 'images/social_3.png');
    })

    $("#social_btn_4").on('mouseover', function(){
        $(this).attr('src', 'images/social_4_dwn.png');
    })
    $("#social_btn_4").on('mouseout', function(){
        $(this).attr('src', 'images/social_4.png');
    })
});

我试图通过这样做来缩短时间：

  $(document).ready(function() {
        for (var i = 1; i < 5; i++) {
            $("#social_btn_"+ i).on('mouseover', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'_dwn.png');
            })
            $("#social_btn_"+ i).on('mouseout', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'.png');
            })
        }
    });

---

有人能解释为什么这不起作用，以及整合我的代码的最佳方法是什么吗？顺便说一句，我知道你可以用CSS3来做这件事，但我需要使用JQuery。谢谢。

您正遭受着非常常见的循环中闭包问题

用'var'声明的JavaScript变量 '具有功能范围，因此我在此处的所有元素中共享。每个处理程序都得到i=5，因为它与.ready范围内的i相同

最简解 可以通过将代码包装在闭包中来解决此问题-定义范围：

 $(document).ready(function() {
       for (var i = 1; i < 5; i++) {(function(i){
            $("#social_btn_"+ i).on('mouseover', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'_dwn.png');
            })
            $("#social_btn_"+ i).on('mouseout', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'.png');
            })
        })(i)}
    });

更正确的解决方案 使用JavaScript对象来表示状态，而不是上面示例中的数据属性

最正确的解决方案 使用CSS，CSS有：hover选择器，当CSS处于悬停状态时，可以更改CSS属性

社交按钮成为div元素，背景图像指向图像，您可以有如下规则：

#myDiv:hover{
    background-image:url(image/social_1_dwn.png)
}

---

你正在遭受一个非常常见的循环中的闭包问题

用'var'声明的JavaScript变量 '具有功能范围，因此我在此处的所有元素中共享。每个处理程序都得到i=5，因为它与.ready范围内的i相同

最简解 可以通过将代码包装在闭包中来解决此问题-定义范围：

 $(document).ready(function() {
       for (var i = 1; i < 5; i++) {(function(i){
            $("#social_btn_"+ i).on('mouseover', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'_dwn.png');
            })
            $("#social_btn_"+ i).on('mouseout', function(){
                $("#social_btn_"+ i).attr('src', 'images/social_'+ i +'.png');
            })
        })(i)}
    });

更正确的解决方案 使用JavaScript对象来表示状态，而不是上面示例中的数据属性

最正确的解决方案 使用CSS，CSS有：hover选择器，当CSS处于悬停状态时，可以更改CSS属性

社交按钮成为div元素，背景图像指向图像，您可以有如下规则：

#myDiv:hover{
    background-image:url(image/social_1_dwn.png)
}

---

请检查一些答案。请检查一些答案。