jquery charger avec variable

Question

Avec le script suivant, je charge un document HTML dans un conteneur div et l'affiche. Avec la variable "x" j'évite que le document soit rechargé à chaque clic sur le bouton.

La fonction permettant de masquer le conteneur est manquante ici, car elle n'a rien à voir avec ma question. Ma question est, comment dois-je changer le script, si j'ai plus de boutons qui chargent différents documents?

La variable "x" doit fonctionner individuellement pour tous les boutons. Y at-il quelque chose comme "this.variable" ou ai-je tort et je dois trouver quelque chose de complètement différent?

Answer 1

Je définirais le document à charger dans un attribut de données. Par exemple:

<span class="button" data-doc="article.html">Load article</span> 

Puis:

$('.button').click(function(){ 
    var $this = $(this), 
     $box = $('.box'), 
     loaded = $this.data('loaded'), 
     doc; 

    if (loaded) { 
     $box.fadeIn(); 
     return; 
    } 

    doc = $this.data('doc'); 

    $box.load(doc, function() { 
     // mark it as being loaded 
     $this.data('loaded', true); 
     $box.fadeIn(); 
    }); 
}); 

Answer 2

En utilisant un gestionnaire d'événements() jQuery vous utilisez uniquement un gestionnaire d'événements une fois.

$('.button').one('click', function() { 
    $('.box').load('article.html'); 
}); 
$('.button').click(function() { 
    $('.box').fadeIn(); 
});