Question

基本上，我正在构建的功能或滑块会触发其他滑块。因此，如果我单击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>

Answer 1

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

更改：

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

Answer 2

您需要在唯一元素上绑定滑块（可以使用属性名称，id或唯一的jQuery选择器来完成）。只需在Slider.Init（）中传递元素，如代码所示。因此，无论何时为该特定元素初始化滑块，它都将在父div范围内，并且只有该特定滑块会移动。

/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/<style>
   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; } </style>

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

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

    <div class="wrapper">

        <div id="div1" 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" > 

                    </div>
                </div>

                <div class="slides">
                    <div class="image" > 

                    </div>
                </div>

                <div class="slides">
                        <div class="image" > 

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

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

        <div id ="div2" 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" > 

                    </div>
                </div>

                <div class="slides">
                    <div class="image"> 

                    </div>
                </div>


                <div class="slides">
                        <div class="image" > 

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

            <div class="banner-detail">
                <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
            </div>
        </div>
        <script>
        (function ($) {
    'use strict';

    var Slider = {

        init : function(elementArr) {

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


            $(elementArr).each(function(index, value) {
                var position = 0;
                var $sliderItemsWrapper = $(value+'.slider-items');
                $sliderItemsWrapper.$slides = $(value+'.slides');
                $sliderItemsWrapper.$sliderButtons = $(value+'.arrow');
                $sliderItemsWrapper.totalSlides = $(value+'.slides').length;

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

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

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

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



    $(document).ready(function() {

        Slider.init(["#div1","#div2"]);
    });

})(jQuery);
        </script>
    </div>

尝试将功能彼此分离或隔离

2 个答案: