标签：jquery javascript css css-selectors html

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

标签：jquery,javascript,css,css-selectors,html
来源： https://codeday.me/bug/20190703/1362679.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。