创建多个滑块并使它们彼此分开运行

Question

我目前正在为我正在创建的网站构建多个滑块。现在我相信我已经完成它的一半，偶然发现了一个我似乎无法解决的问题

由于有多个滑块，我设法得到XmlSerializerNamespaces xmlSerializerNamespaces = new XmlSerializerNamespaces(); xmlSerializerNamespaces.Add("", ""); XmlSerializer xmlSerializer = new XmlSerializer(typeof(YourClass)); using(FileStream fileStream = new FileStream(filePath, FileMode.OpenOrCreate, FileAccess.Write, FileShare.None, BufferSize, FileOptions.WriteThrough)) { XmlWriterSettings xmlWriterSettings = new XmlWriterSettings(); xmlWriterSettings.Indent = true; xmlWriterSettings.NewLineOnAttributes = true; XmlWriter xmlWriter = XmlWriter.Create(fileStream, xmlWriterSettings); xmlSerializer.Serialize(xmlWriter, yourClassInstance, xmlSerializerNamespaces); } 或计算元素内显示的项目数（length）。 jquery .slider中的值将作为length触发器/事件的条件的一部分，该事件是下面的on-click条件。如何将值从if传递到点击触发器，以使滑块左右移动

为我糟糕的英语道歉..

length

$(window).on('load', function() {


	var sliderWrapper      = $('.slider-wrapper'),
	    sliderWrapperWidth = sliderWrapper.width(),
	    slider             = $('.slider'),
	    slideItems         = $('.slider .slide-items'),
	    position           = 0;

    //var itemLengths = [];

	$('.slider-wrapper .slider').each(function() {
		var items = $(this).find('.slide-items').length;
		var sliderBox = $(this);

		//itemLengths.push(items.length); 
		slideItems.outerWidth( sliderWrapperWidth / 2 );


		sliderBox.width( slideItems.outerWidth() * items  )
    });

    $('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
        event.stopPropagation();
        if( position > 0 ) {
            position--;
            $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
        }
    });

    $('.slider-wrapper .slider .buttons .next').on('click', function(e) {
        event.stopPropagation();

	    if( position < totalSlides - 1 ) {
	        position++;
	        $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
	    }
    })


})

/* 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; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; 
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden; 
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; 
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0; 
}

.container .slider-wrapper .slider > div p {
  color: purple; 
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; 
}


.container .slider-wrapper .buttons div {
  background-color: cyan; 
}

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

Answer 1

您可以使用以下内容：

$('.slider-wrapper').each(function() {
    var sliderWrapper      = $(this),
        sliderWrapperWidth = sliderWrapper.width(),
        slider             = sliderWrapper.find('.slider'),
        slideItems         = sliderWrapper.find('.slider .slide-items'),
        position           = 0;

    //itemLengths.push(slideItems.length); 
    slideItems.outerWidth( sliderWrapperWidth / 2 );


    slider.width( slideItems.outerWidth() * slideItems.length  );

    sliderWrapper.find('.buttons .prev').on('click', function(e) {
        ...
    });

    sliderWrapper.find('.buttons .next').on('click', function(e) {
        ...
    });
});

这样滑块的每个实例都有自己的变量和事件。

Answer 2

我在每次点击事件中使用了$(this)来存储与当前点击元素相关的变量。我还为每个滑块添加了data-slide属性，用于替换position变量，以便每个滑块都定义了自己的滑块位置。

我已经清理了一些代码，因为我很无聊。

＆＃13;

＆＃13;

$(document).ready(function() {

  $('.prev').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          currentSlide       = sliderWrapper.attr('data-slide');

      // Check if data-slide attribute is greater than 0
      if( currentSlide > 0 ) {
          // Decremement current slide
          currentSlide--;
          // Assign CSS position to clicked slider
          slider.css({'right' : currentSlide*slideItems.outerWidth() });
          // Update data-slide attribute
          sliderWrapper.attr('data-slide', currentSlide);
      }
  });

  $('.next').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          totalSlides        = slideItems.length,
          currentSlide       = sliderWrapper.attr('data-slide');

    // Check if dataslide is less than the total slides
    if( currentSlide < totalSlides - 1 ) {
        // Increment current slide
        currentSlide++;
        // Assign CSS position to clicked slider
        slider.css({'right' : currentSlide*slideItems.outerWidth() });
        // Update data-slide attribute
        sliderWrapper.attr('data-slide', currentSlide);
    }
  })

});

$(window).on('load', function() {

  $('.slider-wrapper').each(function() {
    var slideItems = $(this).find('.slide-items'),
    items = slideItems.length,
    sliderBox = $(this).find('.slider'),
    sliderWrapperWidth = $(this).width();

    slideItems.outerWidth( sliderWrapperWidth / 2 );
    sliderBox.width( slideItems.outerWidth() * items  );
  });

});

＆＃13;

/* 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; }

* {
box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden;
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0;
}

.container .slider-wrapper .slider > div p {
  color: purple;
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0;
}


.container .slider-wrapper .buttons div {
  background-color: cyan;
}

＆＃13;

<div class="container">
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>

  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的问题在于使用选择器。简而言之，事件功能中的选择器会击中两个滑块。但答案并不像使用$（this）那么简单。这是更长的答案：

jquery的许多功能在于它使得向元素事件添加侦听器变得微不足道。让我们拆开一段代码来了解发生了什么：

$('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
    event.stopPropagation();
    if( position > 0 ) {
        position--;
        $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
    }
});

第$('.slider-wrapper .slider .buttons .prev')行是一个元素选择器，它表示find ALL elements that have hierarchy of classes 'slider-wrapper slider buttons prev'。注意ALL - 这是您的代码出错的地方 - 我们马上就会修复它。该行的结尾是.on('click', function(e) {，表示for EACH of the elements you found, listen for click events and fire the following function when you hear one。

所以 - 回顾一下，找到所有匹配的元素并在click事件上触发一个函数。到目前为止一切都那么好，但是在click事件中发生了什么，以及具体如何知道哪个匹配元素是函数中的上下文。或者在你的情况下，当我们只想影响与按钮相关的滑块时，我们如何阻止它影响两个滑块呢？

这是你问题的核心。从事件函数中查看此行：

$('.slider-wrapper .slider').css({'right' : position*slideItems.width() });

此行使用选择器$('.slider-wrapper .slider')，其中显示“查找具有此样式层次结构的所有元素”。我猜这便士可能会和你一起掉下来。如果只有一个滑块，则只有一个匹配元素，但页面上有两个滑块，有两个与此选择器匹配的元素。结果就是您遇到的情况 - 单击一个按钮，两个滑块都会受到影响。

解决方案是修改此选择器以仅影响与按钮位于同一滑块中的元素，为此，我们需要引用获得单击的按钮的上下文。查看HTML，从按钮开始，我们需要使用class='slider-wrapper'转到元素，然后找到class='slider'的子元素。选择器必须是：

$(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });

这里有一些jquery魔法可以解释。 $(this)在事件函数中使用，并引用触发事件的元素。你使用class='prev'连接了元素上的选择器，所以当我们使用$（this）时，这是我们选择的起始元素。

.parents()是一个选择器，它遍历给定起始元素的元素的祖先树。由于jquery链接（选择器之间的点）我们可以一个接一个地链接选择器，因此我们可以通过以这种方式链接选择器来遍历DOM。添加.parents('.slider-wrapper')表示要查找拥有class='slider-wrapper'的父母。

继续该过程，.find('.slider')使用查找选择器在给定元素的DOM树中查找class='slider'的所有子项。

所有这一切的结果是，当您单击滑块1中的按钮时，所描述的选择器仅影响滑块1.滑块2的相同。

请注意，此处具有广泛外部选择以将事件侦听器应用于多个元素，然后在函数内使用$（this）的模式正是jquery发明者的意图。充分利用祖先和子选择器，您可以在复杂的DOM结构中轻松实现导航和定位。

背景阅读：jquery $(this)，parents()，.find()

注意我修复了与缺少变量totalSliders相关的示例代码中的问题。我使用了与上述相同的技术来计算单击按钮所属的滑块中的滑块数量。

var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;

我稍微修改了你的HTML，因为我们不需要5个滑块来说明tge解决方案。

$(window).on('load', function() {


	var sliderWrapper      = $('.slider-wrapper'),
	    sliderWrapperWidth = sliderWrapper.width(),
	    slider             = $('.slider'),
	    slideItems         = $('.slider .slide-items'),
	    position           = 0;

	$('.slider-wrapper .slider').each(function() {
		var items = $(this).find('.slide-items').length;
		var sliderBox = $(this);

		slideItems.outerWidth( sliderWrapperWidth / 2 );

		sliderBox.width( slideItems.outerWidth() * items  )
    });


    $('.slider-wrapper .buttons .prev').on('click', function(e) {
        event.stopPropagation();
        if( position > 0 ) {
            position--;
            $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });
        }
    });

    $('.slider-wrapper .buttons .next').on('click', function(e) {
        event.stopPropagation();
        console.log('next');
        // fix - get the number of sections in THIS slider.
        var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;
        if( position < totalSlides - 1 ) {
	        position++;
	        $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width()         });
	    }
    })

})

/* 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; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; 
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden; 
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; 
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0; 
}

.container .slider-wrapper .slider > div p {
  color: purple; 
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; 
}


.container .slider-wrapper .buttons div {
  background-color: cyan; 
}

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

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

<div class="container">

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>1-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>2-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>
            <div class="slide-items">
                <p>2-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>2-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>


        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


</div>