cliquez sur le lien de l'élément alternatif avec jquery

StackOverflow https://stackoverflow.com//questions/12654335

Question

Bien qu'il existe de nombreuses bonnes ressources pour parcourir le DOM avec jQuery, je n'ai pas de chance avec mon exemple.

Sur mon site www.smithgrey.co.uk, j'ai une série de galeries de vignettes qui ont toutes un div « titre de section » devant elles.

Ce que je veux réaliser, c'est lorsque vous cliquez en premier sur le div 'titre-section' <a href> le lien de la vignette à droite sera cliqué.

Il existe plusieurs cas de class="section-title" – Malheureusement, je ne suis pas en mesure d'ajouter d'ID ou de classes car ceux-ci sont générés dynamiquement et il m'a été demandé de les conserver tels quels si possible.

Le HTML ressemble à ceci :

<body>
  <div id="content-grid">
    <div class="section-title">
      <span class="section-title-type">Title of the first thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-1">
      </a>
    </div>

    <div class="section-title">
      <span class="section-title-type">Title of the second thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-2">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-3">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-4">
      </a>
    </div>   
  </div>
</body>

Et voici mon jQuery jusqu'à présent mais il ne donne pas le résultat que j'imagine car il cliquera sur le lien, peu importe si je clique sur le premier ou le deuxième. <div class="section-title">.

$('div.section-title').click( function(){
       $(this).parent().next($('div.index-article')).children('a.fancybox').click();
     });

Solution:

Avec l'aide des autres commentateurs, j'ai réussi à comprendre comment le faire fonctionner comme prévu :

$(document).ready(function() {
  $('div.section-title').click( function(){
    $(this).next('.index-article').find('a.fancybox:first').click();
  });
});
Était-ce utile?

La solution

Je suppose que vous avez correctement configuré votre jQuery avec l'événement prêt/etc approprié.C'est comme ça que je procéderais.Veuillez noter que j'ai ajouté un événement click au lien hypertexte pour simuler le clic dans l'exemple jsfiddle.

http://jsfiddle.net/lucuma/s9mds/

$('div.section-title').click(function(e) {
    $(this).next('div').find('a:eq(0)').click(); 
});​

Autres conseils

Utilisez ceci

 $(document).ready(function() {
   $('div.section-title').click( function(){
     $(this).closest($('div.index-article').find('a.fancybox').click();
   });
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top