javascript - 重置函数时将类移动到第一个兄弟

Question

我有这个 slider ，它通过使用 .prev .next jquery 来指示当前正在播放的幻灯片，以传递事件类以显示或指示当前正在播放的幻灯片.

下面是生成该函数的代码。它查找具有 active 类的当前兄弟，然后将其传递给上一个或下一个兄弟。

//Slider Directional Controls
$('.buttons .prev').on('click', function() {
    if( position > 0 ) { 
        position--;
        $('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
        $('.navigation .controls').find('li.active').removeClass('active').prev('li').addClass('active');

    }
});

$('.buttons .next').on('click', function() {
    if( position < totalSlides - 1 ) { 
         position++;
          $('.program-slider .slides').css({'right': position * programSliderWidth});   
          $('.navigation .controls').find('li.active').removeClass('active').next('li').addClass('active');

      }
});

如果我想重置功能怎么办？基本上从其当前兄弟中删除类 active 并将其放在第一个兄弟上以指示它是正在显示的第一张幻灯片。

这是我创建的代码，但似乎可以正常工作，但是当我单击 slider 上的方向控件时，它不会将类 active 传递给下一个兄弟。我重置函数的方法是使用 $(window).on('resize', function(){})

//Add Class active on Start
$('.navigation .controls li.active').removeClass('active');
$('.navigation .controls li:first-child').addClass('active');

function slider() {

    $('.navigation .controls li.active').removeClass('active');
	$('.navigation .controls li:first-child').addClass('active');

    var programSliderWidth = $('.program-slider').width(),
        sliderContainer    = $('.program-slider .slides'),
        slides             = $('.program-slider .slides li'),
        move               = 0,
        position           = 0,
        totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
    slides.width(programSliderWidth);

    //Apply Maximum width based on number of slides
    sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
    $('.navigation .controls li').on('click', function() {
        position = $(this).index(); // -- CHANGE 1 --
        var move     = position*programSliderWidth;

        $('.program-slider .slides').css({'right': move});

        $('.navigation .controls li.active').removeClass('active');
        $(this).addClass('active');
    
    });

    //Slider Directional Controls
    $('.buttons .prev').on('click', function() {
        if( position > 0 ) { 
            position--;
            $('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
            $('.navigation .controls').find('li.active').removeClass('active').prev('li').addClass('active');

        }
    });

    $('.buttons .next').on('click', function() {
        if( position < totalSlides - 1 ) { 
             position++;
              $('.program-slider .slides').css({'right': position * programSliderWidth});   
              $('.navigation .controls').find('li.active').removeClass('active').next('li').addClass('active');

          }
    });
}


$(document).ready(function() {
    slider();
});

$(window).on('resize', function() {
    slider();
})

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

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }
    .navigation .controls li.active {
      background-color: teal;
      color: #fff; }

.buttons {
  position: absolute;
  top: 30%; }

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

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

<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>


	<div class="buttons">
	    <ul>
	        <li class="prev">Prev</li>
	        <li class="next">Next</li>
	    </ul>
	</div>


</div>

<div class="navigation">
    <ul class="controls">
        <li>slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

Answer 1

好的，我们将使用 li使用 css 索引 :eq选择器而不是使用 .prev('li')和 .next('li')

所以你的代码可以像这样在下面找到解释

function slider() {

    $('.navigation .controls li.active').removeClass('active');
	$('.navigation .controls li:first-child').addClass('active');

    var programSliderWidth = $('.program-slider').width(),
        sliderContainer    = $('.program-slider .slides'),
        slides             = $('.program-slider .slides li'),
        move               = 0,
        position           = 0,
        totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
    slides.width(programSliderWidth);

    //Apply Maximum width based on number of slides
    sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
    $('.navigation .controls li').on('click', function() {
        position = $(this).index(); // -- CHANGE 1 --
        var move     = position*programSliderWidth;

        $('.program-slider .slides').css({'right': move});

        $('.navigation .controls li.active').removeClass('active');
        $(this).addClass('active');
    
    });

    //Slider Directional Controls
    $('.buttons .prev').on('click', function() {
      position = (position > 0) ? position - 1 : totalSlides - 1;
      $('.program-slider .slides').css({'right': position * programSliderWidth});
      $('.navigation .controls li').removeClass('active');
      $('.navigation .controls li:eq(' + position + ')').addClass('active');
    });

    $('.buttons .next').on('click', function() {
      position = (position < totalSlides - 1) ? position + 1 : 0;  
      $('.program-slider .slides').css({'right': position * programSliderWidth});
      $('.navigation .controls li').removeClass('active');
      $('.navigation .controls li:eq(' + position + ')').addClass('active');
    });
}


$(document).ready(function() {
    slider();
});

$(window).on('resize', function() {
    slider();
})

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

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }
    .navigation .controls li.active {
      background-color: teal;
      color: #fff; }

.buttons {
  position: absolute;
  top: 30%; }

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

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

<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>


	<div class="buttons">
	    <ul>
	        <li class="prev">Prev</li>
	        <li class="next">Next</li>
	    </ul>
	</div>


</div>

<div class="navigation">
    <ul class="controls">
        <li>slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

解释:

你的 .prev和 .next事件取决于 position 的值变量 .. 你的问题是如何在你的代码中以一种好的方式控制这个值 .. 所以我发现它很容易控制 li按其索引而不是 next('li')和 prev('li')我控制了 position通过使用 position = (position > 0) ? position - 1 : totalSlides - 1; 进行简单检查来计算值在上一个事件和 position = (position < totalSlides - 1) ? position + 1 : 0;在下一个事件..之后我使用$('.navigation .controls li').removeClass('active');删除类 active来自所有li并使用 $('.navigation .controls li:eq(' + position + ')').addClass('active');确定 li使用 css 索引 :eq()添加类的选择器 active对它

希望解释能帮助你理解代码中发生了什么