javascript - 试图将功能彼此分离或隔离

基本上，我正在构建的功能或滑块会触发其他滑块。因此，如果我单击next按钮。所有其他滑块将滑动。我目前正在尝试弄清楚如何使用.each()和this彼此分离或隔离功能，以便如果我创建多个元素，可以说slider不会影响其他元素。

(function ($) {
    'use strict';

    var Slider = {

        init : function() {

            this.$sliderBanner = $('.slider-banner');


            $('.slider-banner').each(function() {
                var position = 0;
                this.$sliderItemsWrapper = $('.slider-items' , this);
                this.$slides = $('.slides', this.$sliderItemsWrapper);
                this.$sliderButtons = $('.arrow');
                this.totalSlides = $('.slides', this.$sliderItemsWrapper).length;

                this.sliderBannerWidth = $(this).width();
                this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width( this.sliderBannerWidth * this.totalSlides );

                this.$slides.width(this.sliderBannerWidth);
                var that = this;

                $('.arrow.-prev').on('click', function(){
                    position --;
                    if ( position == -1 ) { position = that.totalSlides - 1; }
                    that.$sliderItemsWrapper.css('left', - (that.sliderBannerWidth * position));
                    console.log(position);
                });

                $('.arrow.-next').on('click', function() {
                    position ++;
                    if (position == that.totalSlides) { position = 0; }
                    that.$sliderItemsWrapper.css('left', - (that.sliderBannerWidth * position));
                    console.log(position);
                });
            });
        },
    };



    $(document).ready(function() {

        Slider.init();
    });

})(jQuery);

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  height: 100%; }

.wrapper {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  background-color: grey; }

.slides > .image {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%; }

.slider-items {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: 0;
  transition: left 0.5s linear; }
  .slider-items > .slides {
    height: 100%; }

.slider-banner {
  width: 100%;
  position: relative;
  background-color: beige;
  overflow: hidden; }
  .slider-banner .arrow {
    z-index: 10; }
  .slider-banner .arrow.-prev {
    position: absolute;
    top: 30%;
    left: 0; }
  .slider-banner .arrow.-next {
    position: absolute;
    top: 30%;
    right: 0; }
  .slider-banner > .slider-items {
    height: 50vh; }

.carousel-wrapper > .carousel-card {
  height: 100%;
  background-color: violet; }
  .carousel-wrapper > .carousel-card:nth-child(even) {
    background-color: saddlebrown; }

.carousel-region {
  background-color: aqua;
  overflow: hidden; }
  .carousel-region > .carousel-wrapper {
    position: relative;
    left: 0;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    transition: left 0.5s linear; }

/*# sourceMappingURL=style.css.map */

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

    <div class="wrapper">

        <div class="slider-banner">
            <a href="#" class="arrow -prev">prev</a>
            <a href="#" class="arrow -next">next</a>
            <div class="slider-items">

                <div class="slides">
                    <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                    </div>
                </div>

                <div class="slides">
                    <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                    </div>
                </div>

                <div class="slides">
                        <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                        </div>
                </div>
            </div>

            <div class="banner-detail">
                <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
            </div>
        </div>

        <div class="slider-banner">
            <a href="#" class="arrow -prev">prev</a>
            <a href="#" class="arrow -next">next</a>
            <div class="slider-items">


                <div class="slides">
                    <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                    </div>
                </div>

                <div class="slides">
                    <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                    </div>
                </div>


                <div class="slides">
                        <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

                        </div>
                </div>
            </div>

            <div class="banner-detail">
                <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
            </div>
        </div>
    </div>

最佳答案

一个简单的代码修补程序，请确保您绑定到正确的元素。

更改：

this.$sliderButtons = $('.arrow');至this.$sliderButtons = $('.arrow',this);

$('.arrow.-prev').on('click', function(){至$('.arrow.-prev',this).on('click', function(){

$('.arrow.-next').on('click', function(){至$('.arrow.-next',this).on('click', function(){

关于javascript - 试图将功能彼此分离或隔离，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51373001/