javascript - 如何让这段代码一次移动一个类(class)

Question

所以我有三个具有相同轮播效果的DIV。我很确定我可以使用三种不同的 JavaScript 代码一次移动一个，但我希望代码尽可能少。使用当前代码，当我单击一次箭头时，它们三个都会移动。我怎样才能让他们分开搬家？

有3个与下一个相同:

(function ($) {
    $.fn.thumbGallery = function (settings) {
        var $this = $(this);
        return this.each(function () {
            settings = jQuery.extend({
                speed: 1000,
                leftArrow: $this.find('.arrow-left'),
                rightArrow: $this.find('.arrow-right'),
                galleryContainer: $this.find('.gallery-inner'),
                visibleImagesSize: 4
            }, settings);

            var imgElements = settings.galleryContainer.find('img').length;
            var size = settings.visibleImagesSize;

            //settings.leftArrow.hide();

            if (imgElements > settings.visibleImagesSize) {
                settings.rightArrow.show();
            } else {
                //settings.rightArrow.hide();
            }

            function animateLeft() {
                var el = settings.galleryContainer.children(":last");

                settings.galleryContainer.animate({
                    left: '+=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function animateRight() {
                var el = settings.galleryContainer.children(":first");
                settings.galleryContainer.animate({
                    left: '-=' + el.outerWidth(true) + 'px'
                },
                    settings.speed);
            }

            function checkArrows() {
                if (size === settings.visibleImagesSize) {
                    //settings.leftArrow.hide();
                } else {
                    settings.leftArrow.show();
                }

                if (size === imgElements) {
                    //settings.rightArrow.hide();
                } else {
                    settings.rightArrow.show();
                }
            }

            settings.leftArrow.click(function () {
                animateLeft();
                size--;
                checkArrows();
            });

            settings.rightArrow.click(function () {
                animateRight();
                size++;
                checkArrows();
            });

        });
    };
})(jQuery);



$(document).ready(function () {
    $('.gallery').thumbGallery();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
    <h2>Open Space</h2>
    <p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
    <center>
        <div class="gallery">
            <div class="arrow-left">
                <div class="arrow-left-small">
                </div>
            </div>
            <div class="gallery-outer">
                <div class="gallery-inner">
                    <div class="gallery-tmb">
                        <img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
                    </div>
                    <div class="gallery-tmb">
                        <img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
                    </div>
                </div>
            </div>
            <div class="arrow-right">
                <div class="arrow-right-small">
                </div>
            </div>
        </div>
        <span class="btn_margin">
    <asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
  </span>
    </center>
</div>

Answer 1

它们一起移动的原因是因为您在调用 thumbsGallery() 时使用了 .gallery 选择器，它适用于具有 class="的所有元素gallery" 在 HTML 代码中。您可以做的是简单地向每个图库添加一个唯一的 id 并使用每个选择器调用 thumbsGallery()。

HTML:

<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>

Javascript:

$(document).ready(function () {
    $('.gallery#executive_gallery').thumbGallery();
    $('.gallery#conference_gallery').thumbGallery();
    $('.gallery#open_gallery').thumbGallery();
});

JSFiddle:https://jsfiddle.net/3qeLumkp/1/