滑块问题：第一个孩子

Question

我刚写了一些jQuery行，在页面上有一个简单的滑块。

我不想让这个滑块循环，所以当我们到达列表的开头/结尾时，我禁用 PREV / NEXT 按钮。它适用于 NEXT ，但我无法理解为什么它不能用于 PREV （你可以看到按钮没有被禁用，即使第一个元素是活动的）。

有人看到我会错过的东西吗？

$(function(){

    function sliderUpdate(elements) {
        $(elements).toggleClass('active');
        var active = $('#slider li.active');
        $('#slider .prev').toggleClass('disabled', active.is(':first-child'));
        $('#slider .next').toggleClass('disabled', active.is(':last-child'));
    }
    $('#slider').on('click', '.previous:not(.disabled)', function(event) {
        var toToggle = $('#slider li.active');
        toToggle = toToggle.add(toToggle.prev('li'));
        sliderUpdate(toToggle);
    });
    $('#slider').on('click', '.next:not(.disabled)', function(event) {
        var toToggle = $('#slider li.active');
        toToggle = toToggle.add(toToggle.next('li'));
        sliderUpdate(toToggle);
    });
    sliderUpdate($('#slider li').first());

});

#slider li.active {
  color: red;
}
#slider .disabled {
  color: #ddd;
  cursor: default;
}

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

<div id="slider">
  <a href="#" class="previous">PREVIOUS</a>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <a href="#" class="next">NEXT</a>
</div>

Answer 1

您的代码很完美，只是类名不正确。

//changed to .previous.
$('#slider .previous').toggleClass('disabled', active.is(':first-child'));

代码段

＆＃13;

＆＃13;

$(function() {

  function sliderUpdate(elements) {
    $(elements).toggleClass('active');
    var active = $('#slider li.active');
    $('#slider .previous').toggleClass('disabled', active.is(':first-child'));
    $('#slider .next').toggleClass('disabled', active.is(':last-child'));
  }
  $('#slider').on('click', '.previous:not(.disabled)', function(event) {
    var toToggle = $('#slider li.active');
    toToggle = toToggle.add(toToggle.prev('li'));
    sliderUpdate(toToggle);
  });
  $('#slider').on('click', '.next:not(.disabled)', function(event) {
    var toToggle = $('#slider li.active');
    toToggle = toToggle.add(toToggle.next('li'));
    sliderUpdate(toToggle);
  });
  sliderUpdate($('#slider li').first());

});

＆＃13;

#slider li.active {
  color: red;
}
#slider .disabled {
  color: #ddd;
  cursor: default;
}

＆＃13;

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

<div id="slider">
  <a href="#" class="previous">PREVIOUS</a>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <a href="#" class="next">NEXT</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

//将.prev更改为.previous。 $（＆＃39; #slider .previous＆＃39;）。toggleClass（＆＃39;禁用＆＃39;，active.is（＆＃39;：first-child＆＃39;））;

  function sliderUpdate(elements) {
   $(elements).toggleClass('active');
   var active = $('#slider li.active');
   $('#slider .prev').toggleClass('disabled', active.is(':first-child'));//change in this line
    $('#slider .next').toggleClass('disabled', active.is(':last-child'));
    }