我可以缩小这个jquery脚本吗？

Question

我想知道如果有人能帮我缩小这个jQuery脚本一点点？ 现在，我有悬停ID，但如果需要，可以更改为一个类。

我确定必须有一些方法来处理“this”，而不是必须逐一列出。

下面是11个不同功能中的2个示例。我希望有一种方法可以缩小这个问题......就像我说过的，如果我需要将id改为Classes，那也可以。

谢谢！ 特洛伊

<script> 
$(document).ready(function(){ 

$("#gfo-1").hover(
function() { 
$(".gfo-1-arrow").stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$(".gfo-1-arrow").stop().animate({"opacity": "0"}, "slow"); 
}); 

$("#gfo-2").hover(
function() { 
$(".gfo-2-arrow").stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$(".gfo-2-arrow").stop().animate({"opacity": "0"}, "slow"); 
}); 

}); 
</script> 

Answer 1

是的，你应该使用一个类。

因此，在设置gfo-1，gfo-2 ID的地方，添加一个说“gfo”的类。

<div class="gfo">etc</div> 

在你的jQuery

然后，您可以使用类似：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var $arrow = $(".gfo-1-arrow"); // Store object for performance 
    $(".gfo").hover(
    function() { 
     $arrow.stop().animate({"opacity": "1"}, "slow"); 
    }, 
    function() { 
     $arrow.stop().animate({"opacity": "0"}, "slow"); 
    }); 
}); 
</script> 

根据您的要求，您可能还可以分别使用淡入（）和淡出。

<script type="text/javascript"> 
$(document).ready(function(){ 
    var $arrow = $(".gfo-1-arrow"); // Store object for performance 
    $(".gfo").hover(
    function() { 
     $arrow.stop().fadeIn("slow"); 
    }, 
    function() { 
     $arrow.stop().fadeOut("slow"); 
    }); 
}); 
</script> 

Answer 2

你可以做的一件事情，因为你的回调是非常相似的是写一个函数，产生回调。它使用闭包的概念。

<script> 
$(document).ready(function(){ 

function makeCallback(id, opacity) { 
return (function() { 
    $(id).stop().animate({"opacity": opacity}, "slow"); 
}); 
} 
$("#gfo-1").hover(makeCallback(".gfo-1-arrow", "1"),makeCallback(".gfo-1-arrow","0")); 
$("#gfo-2").hover(makeCallback(".gfo-2-arrow", "1"),makeCallback(".gfo-2-arrow","0")); 
}); 
</script> 

Answer 3

，你可以做，以缩短脚本最主要的是与一类或某事

$(document).ready(function(){ 
$(".gfo").hover(
function() { 
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$("."+$(this).attr("id")+"-arrow").stop().animate({"opacity": "0"}, "slow"); 
}); 
}) 

这样你就可以一次性写入功能适用于所有受影响的元素更一般地写函数。

Answer 4

，而完全不改变你的HTML，你可以缩短它归结为这样：

$(function(){ 
    $("#gfo-1, #gfo-2").hover(function() { 
    $("." + this.id + "-arrow").stop(true, true) 
           .animate({opacity: "toggle"}, "slow"); 
    }); 
}); 

如果你给了#gfo-1和#gfo-2要素类，你可以缩短$("#gfo-1, #gfo-2")到$(".thatClass")为好，使这项工作尽可能多的你想要的。