javascript - 不允许在 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，因为它与 .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)}
    });

更正确的解决方案

您有 "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)
}