Question

在“图库”页面上，我有多个“图库块”实例，如下所示：

    <!-- 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 -->

在我的脚本文件中，我有以下内容适用于'gallery block'的一个实例：

    (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);

但是如何让上面的内容来处理'gallery block'的大量实例？

谢谢，

Answer 1

您可能想要使用jQuery.each

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

不要忘记将jQuery('.thumbnails a')替换为jQuery(this).('.thumbnails a')

Answer 2

有很多种可能性。已经提到了每个循环的答案，但我不喜欢这个具体案例的答案。

现在最简单的做法是在点击处理程序中添加以下行：

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

之后，要更改.mainImage的内容，您可以使用obj.find('.mainImage')选择它。

这样做，只为您的所有画廊留下一个点击处理程序。

如何获得一个函数来处理多个HTML实例？

2 个答案: