Question

我有一个滑块，我想在其中跟踪滑块的当前位置。单击('next')和('prev')时运行的功能应该记录滑块的当前位置。

不幸的是，它跳过了第一个孩子，并从滑块的第二个项目开始计数。而不是第一项是index 0,，第二项是index 0

$(document).foundation()
$('.bullet').first().addClass('active');

//sets first item to active
$('.slider-item').first().addClass('active');

function dec() {
  var $this = $(this);
  var current = $('.slider-items').find('.active');
  var position = $('.slider-items').children().index(current);

  console.log(position)
}

$('.next, .prev').click(function() {
  dec();
  var $this = $(this);

  var current = $('.slider-items').find('.active');
  var position = $('.slider-items').children().index(current);

  var numItems = $('.slider-item').length;

  if ($this.hasClass('next')) {
    if (position < numItems - 1) {
      $('.active').removeClass('active').next().addClass('active');
    } else {
      $('.slider-item').removeClass('active').first().addClass('active');
      $('.bullet').removeClass('active').first().addClass('active');
    } //else
  } else {
    if (position === 0) {
      $('.slider-item').removeClass('active').last().addClass('active');
      $('.bullet').removeClass('active').last().addClass('active');
    } else {
      $('.active').removeClass('active').prev().addClass('active');
    }
  }
}); // click function

Answer 1

当我针对一个简单的项目符号列表示例运行代码时，该代码似乎可以正常工作。它正确地指出第一个项目符号点是索引0。您是否只是在错误的位置调用了dec()函数？ 请注意，当您单击下一步时，您是在更改位置之前记录当前位置。我更新了dec()代码以接受参数来显示我的意思。 >

$(document).ready(function() {

//sets first item to active
$('.slider-item').first().addClass('active');

function dec(prefix) {
  var $this = $(this);
  var current = $('.slider-items').find('.active');
  var position = $('.slider-items').children().index(current);

  console.log(prefix + position);
}

$('.next, .prev').click(function() {
  dec("before click handled: ");
  var $this = $(this);

  var current = $('.slider-items').find('.active');
  var position = $('.slider-items').children().index(current);

  var numItems = $('.slider-item').length;

  if ($this.hasClass('next')) {
    if (position < numItems - 1) {
      $('.active').removeClass('active').next().addClass('active');
    } else {
      $('.slider-item').removeClass('active').first().addClass('active');
      $('.bullet').removeClass('active').first().addClass('active');
    } //else
  } else {
    if (position === 0) {
      $('.slider-item').removeClass('active').last().addClass('active');
      $('.bullet').removeClass('active').last().addClass('active');
    } else {
      $('.active').removeClass('active').prev().addClass('active');
    }
  }
  dec("after click handled: ");

})}); // click function

li.active {
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slider-items">
<li class="slider-item">A</li>
<li class="slider-item">B</li>
<li class="slider-item">C</li>
<li class="slider-item">D</li>
</ul>
<button class="prev">Prev</button>
<button class="next">Next</button>

点击次数未计入索引

1 个答案: