我正在努力减少我拥有的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）。感谢。
答案 0 :(得分：7)
你在那里的循环问题中遇到了“那么常见的”关闭。
使用'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你有data-hover选择器，这通常是大多数时候代码味道的强烈指示。
您正在使用顺序数据和JavaScript体育数组。或者，您可以使用课程。
您可以在指向悬停图像的每个图像上存储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"));
});
});
类，并执行以下操作：
:hover让JavaScript对象代表状态而不是数据属性，如上例所示。
使用CSS，CSS具有div选择器，可让您在悬停时更改CSS属性。
社交按钮变为background-image元素，#myDiv:hover{
background-image:url(image/social_1_dwn.png)
}
指向图像，您可以使用以下规则：
{{1}}