Birden çok HTML örneğiyle nasıl başa çıkılır? Bir Galeri sayfada

Question

ben şöyle 'galeri bloğu' birden çok örneğini vardır:

<!-- gallery block --> 
    <div class="gallery"> 

     <div class="thumbnails"> 
     <a href="images/test-image-1.jpg"><img src="images/test-image-1.jpg" alt="Test Coach"></a> 
     <a href="images/test-image-2.jpg"><img src="images/test-image-2.jpg" alt="Test Coach"></a> 
     <a href="images/test-image-3.jpg"><img src="images/test-image-3.jpg" alt="Test Coach"></a> 
     <a href="images/test-image-4.jpg"><img src="images/test-image-4.jpg" alt="Test Coach"></a> 
     <a href="images/test-image-5.png"><img src="images/test-image-5.png" alt="Test Coach"></a> 
     </div> 

     <div class="mainImage"></div> 

    </div> 
    <!-- /gallery block --> 

Ve komut dosyası

Ben 'galeri bloğu' biri örnekleri için çalışıyor şu var:

(function() { 
     'use strict'; 
     if (jQuery('body.gallery-page').length > 0) { 

      jQuery('.thumbnails a').click(function(evt) { 
      //don't follow link 
      evt.preventDefault(); 
      //get path to new image 
      var imgPath = jQuery(this).attr('href'); 
      //get reference to old image 
      var oldImage = jQuery('.mainImage img'); 

       //create HTML for new image 
       var newImage = jQuery('<img src="' + imgPath +'">'); 
       //make new image invisible 
       newImage.hide(); 
       //add to the .mainImage div 
       jQuery('.mainImage').prepend(newImage); 
       //fade in new image 
       newImage.fadeIn(1000); 

       //fade out old image and remove from DOM 
       oldImage.fadeOut(1000,function(){ 
       jQuery(this).remove(); 
       }); 
      }); // end click 

      jQuery('.thumbnails a:first').click(); 

    } 

    })(jQuery); 

Ancak, 'galeri bloğu' ile ilgili pek çok örnekle nasıl başa çıkabilirim? Sen jQuery.each

$('div.gallery').each(function() { 
    // Your method here 
}); 

kullanmak Ve birçok olasılık vardır jQuery(this).('.thumbnails a')

Answer 1

. Her bir döngü ile cevap zaten belirtilmiştir, ancak bu özel durum için bu cevabın bir hayranı değilim. Eğer obj.find('.mainImage') ile seçebilirsiniz .mainImage içeriğini değiştirmek için, Bundan sonra

var obj = jQuery(this).closest('.gallery'); 

:

şu anda yapılacak en kolay şey tıklama işleyicisi içinde aşağıdaki satırı eklemektir.

Böylelikle, tüm galerileriniz için tek tıklatma işleyicisi ile sizi bırakır.

Answer 2

ile jQuery('.thumbnails a') değiştirmeyi unutmayın isteyebilirsiniz

sayesinde