Problème de boucle JQuery fadeIn fadeOut

Question

J'essaie de créer un effet de fondu jQuery fadeIn pour le contenu de ma page en utilisant le code ci-dessous.

$(document).ready(function(){ 
$("#main").click(function(){ 
    $("#content").fadeOut(800, function(){ 
     $("#content").load("main.html", function(){ 
      $("#content").fadeIn(800); 
     }); 
    }); 
}); 

$("#gallery").click(function(){ 
    $("#content").fadeOut(800, function(){ 
     $("#content").load("gallery.html", function(){ 
      $("#content").fadeIn(800); 
     }); 
    }); 
}); 

}); 

Ainsi, chaque fois qu'un utilisateur clique sur soit le lien principal ou d'un lien de la galerie, l'ancien contenu disparaît et le nouveau contenu apparaît en fondu. Le problème que je suis confronté est que pour chaque lien que je dois répéter le même code et encore. J'ai donc essayé d'utiliser une boucle pour simplifier cela mais ça ne marche pas. Voici mon code:

var p = ["#main","#gallery", "#contact"]; 
var q = ["main.html", "gallery.html", "contact.html"]; 
for (i=0;i<=(p.length-1);i++){ 
    $(p[i]).click(function(){ 
    $("#content").fadeOut(500, function(){ 
     $("#content").load(q[i], function(){ 
      $("#content").fadeIn(500); 
     }); 
    }); 
}); 
} 

Il fonctionne très bien quand j'écris répéter les scripts pour chaque lien, mais il ne fonctionne pas quand je les combine dans une boucle. Je n'ai que l'effet FadeOut et rien ne se passe après.

Cela peut être un problème très simple ou peut être quelque chose de profond dans jQuery. Toute suggestion ou aide est grandement appréciée.

TK

Answer 1

Vous devez saisir la valeur actuelle de i ou q[i] dans une fermeture séparée, comme:

function buildChangeOverTo(src) 
{ 
    return function() { 
     var content = $("#content"); 
     content.fadeOut(500, function(){ 
      content.load(src, function(){ 
       content.fadeIn(500); 
     }}); 
    } 
} 

var p = ["#main","#gallery", "#contact"]; 
var q = ["main.html", "gallery.html", "contact.html"]; 
for (i=0;i<=(p.length-1);i++) { 
    $(p[i]).click(buildChangeOverTo(q[i])); 
} 

Il existe des tonnes d'informations sur ces fermetures étranges javascript sur le web.

Answer 2

votre variable i est toujours évaluée à 3, ce qui rend q [i] non définie. vous devrez trouver un moyen, comme une classe peut-être pour persister le numéro associé jusqu'à la fonction de rappel.

Si ce n'est vraiment que les trois liens, je suggérerais quelque chose de plus simple comme une déclaration de cas.

switch $(this).attr('id') { 
    case 'gallery' : ; break; 
    case 'contact' : y; break; 
    case 'main' : z; break; 
} 

et si vous êtes inquiet au sujet duplication de code il suffit d'écrire une fonction qui accepte ce que la page pour charger et appeler dans chaque .cliquez()

Answer 3

J'aborderais ce problème en ajoutant une classe aux liens, disons fadeLink et j'ajouterais un attribut personnalisé au lien comme fadeUrl. Je mettrais le lien des destinations dans l'attribut fadeUrl sur chaque lien et votre document code prêt pourrait ressembler à ceci:

$(document).ready(function(){ 
    $(".fadeLink").click(function(){ 
     var jqThis = $(this); 
     $("#content").fadeOut(800, function(){ 
            $("#content").load(jqThis.attr("fadeUrl"), function(){ 
                $("#content").fadeIn(800); 
      }); 
     }); 
    }); 
}); 

Ceci côté à pas la boucle et d'ajouter ou de modifier des liens à l'avenir, vous avez seulement pour changer les données sur les liens.