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

Question

我正在努力减少我拥有的JS数量,而且我不确定为什么我不允许按照我正在尝试的方式去做.这只是代码,用于图像上的一些鼠标悬停/鼠标悬停功能:

$(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).谢谢.

Answer 1

你在那里的循环问题中遇到了"那么常见的"关闭.

使用'var'声明的JavaScript变量具有函数作用域,因此i在此处的所有元素之间共享.每个处理程序都得到了,i=5因为它i与范围相同.ready

最简单的解决方案

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

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

更正确的解决方案

你有"string"+i选择器,这通常是大多数时候代码气味的强烈指示.您正在使用顺序数据和JavaScript体育数组.或者,您可以使用课程.

您可以data-hover在指向悬停图像的每个图像上存储属性.然后,您可以social-icon为图像添加一个类,并执行以下操作:

$(document).ready(function(){
    $(".socialButton").mouseover(function(e){
        $(this).attr("src",$(this).data("hover"));
        $(this).data("old-src",$(this).attr("src"));
    }).mouseout(function(e){
            $(this).attr("src",$(this).data("old-src"));
    });
});

更正确的解决方案

具有表示状态的JavaScript对象而不是上面示例中的数据属性.

最正确的解决方案

使用CSS,CSS有:hover选择器,可以让你在悬停时更改CSS属性.

社交按钮成为指向图像的div元素background-image,您可以拥有如下规则:

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