Puis-je réduire ce script jquery?

Question

Je me demandais si quelqu'un pouvait m'aider à réduire un peu ce script jquery? En ce moment, j'ai l'ID en vol stationnaire, mais cela peut être changé en classe si besoin est.

Je suis sûr qu'il doit y avoir un moyen de le faire avec "ceci" au lieu d'avoir à lister tous et chacun.

Voici un exemple avec 2 des 11 fonctions différentes. J'espère qu'il y a un moyen de réduire ça ... comme je l'ai dit, si je dois changer les identifiants en Classes, c'est bien aussi.

Merci! Troy

<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

Oui, vous devriez probablement utiliser une classe.

Ainsi, lorsque vous définissez vos identifiants gfo-1, gfo-2, ajoutez une classe de dire "gfo".

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

Ensuite, dans votre jQuery, vous pouvez utiliser quelque chose comme:

<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> 

Selon vos besoins, vous pourriez également être en mesure d'utiliser fadeIn() et fadeOut respectivement.

<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

Une chose que vous pouvez faire puisque vos rappels sont très similaires, est d'écrire une fonction qui génère des rappels. Il utilise le concept de fermetures.

<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

La principale chose que vous pourriez faire pour raccourcir le script est d'écrire la fonction plus générique avec une classe ou quelque chose

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

De cette façon, vous pouvez écrire la fonction une fois pour tous les éléments concernés.

Answer 4

Sans changer votre code HTML du tout, vous pouvez le raccourcir à ceci:

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

Si vous avez donné les #gfo-1 et #gfo-2 éléments d'une classe, vous pourriez réduire $("#gfo-1, #gfo-2") jusqu'à $(".thatClass") ainsi, faire ce travail sur autant que vous voulez.