javascript – 滑块问题：第一个孩子

2023年9月14日 141次阅读

我刚写了一些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>

最佳答案 你的代码很完美,只是类名不正确.

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

代码片段

$(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());

});
#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>
点赞