Jquery load() help

Question

Je crée une page portfolio pour mon site personnel. J'ai un curseur avec environ 20 ancres qui lient à des projets sur lesquels j'ai travaillé, chacun contient un logo client qui, lorsqu'il est cliqué, devrait charger du contenu html puis fondu ce contenu dans un conteneur div sur la même page.

J'ai été conseillé d'utiliser la charge de la méthode JQuery() qui semble tout droit. La question que je me pose est: dois-je répéter le code suivant pour chacune des 20 ancres, car l'url est différente pour chacun ou existe-t-il un moyen plus efficace?

$('a#project1').click(function() { 
    $('#work').load('ajax/project1.html'); 
} 

aurais-je aussi utiliser la méthode unload() d'abord pour assurer la div que je suis le chargement en est vide? Merci d'avance.

Answer 1

Si vous venez de donner les points d'ancrage d'une href et une classe comme ceci:

<a class="project" href="ajax/project1.html">Project 1</a> 
<a class="project" href="ajax/project2.html">Project 2</a> 

Vous pouvez utiliser jQuery comme cela pour tous:

$('a.project').click(function() { 
    $('#work').load(this.href); 
} 

---

Solution 2: Si vos liens sont dans un conteneur, vous pouvez changer légèrement le sélecteur et ont moins de répétitions, comme ceci:

<div class="projects"> 
    <a href="ajax/project1.html">Project 1</a> 
    <a href="ajax/project2.html">Project 2</a> 
</div> 

Le vous utiliseriez ceci:

$('.projects a').click(function() { 
    $('#work').load(this.href); 
} 

L'avantage de ces deux approches est que, avec javascript qui est désactivé, ils se dégradent un peu avec élégance (selon la façon dont votre contenu semble) et l'utilisateur peut encore voir le contenu en cliquant sur le lien.

Answer 2

Pour répondre à votre deuxième question, non, vous ne devez pas utiliser unload. Comme l'explique la documentation pour load, il récupère l'URL et place le code HTML résultant dans le conteneur spécifié - comme si vous aviez fait un .innerHTML sur votre div de travail.

Dans la dernière jQuery, essayez:

$('#slider-id').delegate('a', 'click', function() { 
    $('#work').load(this.href); 
}); 

Si vous utilisez jQuery 1.3, essayez:

// All anchors you want to be activated need to have the class workLink 
$('a.workLink').live('click', functiON() { 
    $('#work').load(this.href); 
});