从同一个类

Question

我创建了一个jQuery插件，允许创建针对特定类的滑块功能。现在在场景中，如果有人创建了两个单独的类和两个单独的调用，则分离工作正常。

问题：是否可以让一个具有多个实例的类然后将它们分开？目前，如果您从缩略图中选择图像或使用prev和next功能，它将在两个实例上都发生变化。

Jsfiddle：http://jsfiddle.net/jagmitg/xcjeg06g/

＆＃13;

＆＃13;

(function ($) {
    $.fn.thumbnailSlider = function (options) {

        var defaults = {
            thumbnailActivation: false,
            callback: function () {}
        };

        var _se = $.extend(defaults, options);

        var $el = this,
            thumbnailHandler = $el.find('.product-gallery-super'),
            targetImg = $el.find('.main-image'),
            superZoomParam = thumbnailHandler.find('.active-thumbnail').data('image-index'),

            navigate = function (direction) {
                current = thumbnailHandler.find('.active-thumbnail');
                nextPrevious = findNextPreviousActive(direction);
                current.removeClass('active-thumbnail');
                nextPrevious.addClass('active-thumbnail');
                targetImg.attr('src', nextPrevious.data('image'));
                enableDisableButtons();
            },

            findNextPreviousActive = function (direction) {
                if (direction == 'next') {
                    previousNext = thumbnailHandler.find('.active-thumbnail').nextAll().not('.comingSoon').first();
                } else {
                    previousNext = thumbnailHandler.find('.active-thumbnail').prevAll().not('.comingSoon').first();
                }
                return previousNext;
            },

            enableDisableButtons = function () {
                if (findNextPreviousActive('next').length === 0) {
                    $el.find('.super-next').addClass('disabled').prop('disabled', true);
                } else {
                    $el.find('.super-next').removeClass('disabled').removeProp('disabled');
                }
                if (findNextPreviousActive('prev').length === 0) {
                    $el.find('.super-prev').addClass('disabled').prop('disabled', true);
                } else {
                    $el.find('.super-prev').removeClass('disabled').removeProp('disabled');
                }
            },

            thumbnailActivator = function () {
                if (superZoomParam !== '') {
                    thumbnailHandler.children().removeClass("active-thumbnail");
                    thumbnailHandler.children().each(function (index, value) {
                        if (superZoomParam === index) {
                            $(this).addClass('active-thumbnail');
                            targetImg.attr('src', thumbnailHandler.find('.active-thumbnail').data('image'));
                            //NewLookImp.resizeBinder();
                            enableDisableButtons();
                        }
                    });
                }
            },

            clickActivator = function () {
                thumbnailHandler.children().on('click', function (e) {
                    e.preventDefault(e);
                    var zoomImg = $(this).attr('data-zoom-image');
                    var prodImg = $(this).attr('data-image');
                    var imgSrc = $(this).children().attr('src');
                    if (imgSrc != '/images/imagecomingsoon_en.jpg') {
                        $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");
                        targetImg.attr('src', prodImg);
                        targetImg.attr('data-zoom-image', zoomImg);
                        //NewLookImp.resizeBinder();
                    } else {
                        console.log(prod.children());
                        prod.addClass('comingSoon');
                    }
                    enableDisableButtons();
                });
            },

            init = function () {
                for (i = 0; i < $el.size(); i++) {

                    _se.callback();

                    if (_se.thumbnailActivation) {
                        _se.thumbnailActivator();
                    }

                    clickActivator();

                    $el.find('.super-prev').click(function () {
                        navigate("prev");
                        return false;
                    });

                    $el.find('.super-next').click(function () {
                        navigate("next");
                        return false;
                    });

                }
            };

        init();
        return $el;
    }
})(jQuery);

$('.mainElement').thumbnailSlider();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="mainElement">
  <div class="super-image-thumb">
    <div class="product-gallery-super">
      <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
    </div>
  </div>
  <div class="main-image-container">
    <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingSoonMain(this)" />
    <button name="prev" class="super-prev" class="disabled">Prev</button>
    <button name="next" class="super-next">Next</button>
  </div>
</div>

<div class="mainElement">
  <div class="super-image-thumb">
    <div class="product-gallery-super">
      <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
      <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">
        <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingSoonThumb(this);this.parentNode.className = 'product-zoom-gallery comingSoon';" />
      </a>
    </div>
  </div>
  <div class="main-image-container">
    <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingSoonMain(this)" />
    <button name="prev" class="super-prev" class="disabled">Prev</button>
    <button name="next" class="super-next">Next</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;