jQuery - rendre le long code facile court (boucle je suppose)?

Question

J'ai un code comme ceci:

$("#item-1").hover(function(e) { 
     e.preventDefault(); 
     $("#item-text").stop().animate({marginLeft: "0px"}); 
     $("#item-1-image").animate({opacity: 1}); 
    }) 

$("#item-1").mouseout(function() { 
    $("#item-1-image").animate({opacity: 0}); 
}) 

Je dois répéter cette opération pour changer tout "élément-1" à "article-2", "article-3", etc.

exactement 10 fois Comment faire ça?

[modifier]

Quel est le meilleur/chemin le plus court - car en fait je sais comment forcer à travailler, mais ce n'est pas une façon élégante;)

Answer 1

Vous pouvez utiliser un javascript régulier pour chaque boucle .

for (var i = 1; i <= 10; i++) { 
    $("#item-" + i).hover(... 
} 

Answer 2

for (var i=1;i<=10;++i){ 
    $('#item-'+i).hover(...).mouseout(...); 
} 

Answer 3

for (var i=1;i<11;i++) 
{ 
$("#item-"+i).hover(function(e) { 
     e.preventDefault(); 
     $("#item-text").stop().animate({marginLeft: "0px"}); 
     $("#item-"+i+"-image").animate({opacity: 1}); 
    }) 

$("#item-"+i).mouseout(function() { 
    $("#item-"+i+"-image").animate({opacity: 0}); 
}) 
} 

Answer 4

Vous ne devriez pas faire hover() et mouseout(). La méthode .hover() accepte 2 fonctions représentant mouseenter et mouseleave.

Donner les éléments d'une classe commune, puis extraire le numéro de l'ID

$(".someClass").hover(function(e) { 
     var num = this.id.split('-').pop(); 
     e.preventDefault(); 
     $("#item-text").stop().animate({marginLeft: "0px"}); 
     $("#item-" + num + "-image").animate({opacity: 1}); 
}, function() { 
     var num = this.id.split('-').pop(); 
     $("#item-" + num + "-image").animate({opacity: 0}); 
}); 

Si vous ne pouvez pas ajouter une classe pour une raison quelconque, vous pouvez faire une boucle, mais vous devez utiliser un javascript fermeture pour conserver la valeur de l'index pour les gestionnaires.

for(var i = 1; i < 11; i++) { 

    (function(num) { 
     $("item-" + i).hover(function(e) { 
       e.preventDefault(); 
       $("#item-text").stop().animate({marginLeft: "0px"}); 
       $("#item-" + num + "-image").animate({opacity: 1}); 
     }, function() { 
       $("#item-" + num + "-image").animate({opacity: 0}); 
     }); 
    })(i); 

} 

Answer 5

L'événement hover doit gérer les événements over et out très bien. Si vous êtes bloqué avec ces identifiants, vous pouvez utiliser un ^= pour sélectionner les ID commençant par "item-".

$("div[id^='#item-']").hover(
    function(e) { 
     e.preventDefault(); 
     $(this).find("p").stop().animate({marginLeft: "0px"}); 
     $(this).find("img").animate({opacity: 1}); 
    }, 
    function() { 
     $(this).find("img").animate({opacity: 0}); 
    } 
); 

Vous devriez mieux utiliser une classe css car ces sélecteurs seraient beaucoup plus faciles à utiliser.

Answer 6

$(".item").hover(function(e) { 
     e.preventDefault(); 
    $("#item-text").stop().animate({marginLeft: "0px"}); 
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 1}); 
},function() { 
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 0}); 
}); 

1. Utilisez vol stationnaire pour les deux événements
2. Utilisez les classes et un attribut, pas ids avec des numéros