javascript - 当第一个或最后一个项目处于事件状态时隐藏下一个和上一个按钮

Question

我在隐藏第一个/最后一个项目的上一个/下一个按钮时遇到问题。我试图在第一个按钮上隐藏上一个按钮，在最后一个按钮上隐藏下一个按钮。当前项目具有“事件”类。

HTML:

<div class="container content">
    <div class="row">
        <div class="col-xs-3 lefty">
            <div id="left-nav">
                <ul>
                    <li><a class="nav-button" href="#1">Link 1</a></li>
                    <li><a class="nav-button" href="#2">Link 2</a></li>
                    <li><a class="nav-button active" href="#3">Link 3</a></li>
                    <li><a class="nav-button" href="#4">Link 4</a></li>
                    <li><a class="nav-button" href="#5">Link 5</a></li>
                    <li><a class="nav-button" href="#6">Link 6</a></li>
                </ul>
            </div>
        </div>
        <div class="col-xs-9 righty">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>

            <div class="bottom-links">
                <a class="prev-button" href="#">Left</a>
                <a class="next-button" href="#">Right</a>
            </div>

        </div>
    </div>
</div>

工作 jQuery:

$(document).ready(function () {
    $('.next-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $next = $el.parent().next();

        if ($next.length === 0) $next = $('#left-nav li:first');

        $next.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $next.find('a.nav-button').attr('href');

    });


    $('.prev-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $prev = $el.parent().prev();

        if ($prev.length == 0) $prev = $('#left-nav li:last');

        $prev.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $prev.find('a.nav-button').attr('href');

    });
});

我的尝试:

$(document).ready(function () {
    if($('.nav-button').eq(-1).is(':not(.active)')){
        $('.next-button').show();
    }
    else {
        $('next-button').hide();
});

$(document).ready(function () {
    if($('.nav-button').eq(1).is(':not(.active)')){
        $('.prev-button').show();
    }
    else {
        $('prev-button').hide();
});

fiddle : http://jsfiddle.net/jameelmoses/uo17qc94/

Answer 1

所以我只是添加了几个条件来隐藏和显示下一个/上一个按钮

               //Bottom links
   $(document).ready(function() {
       $("#prev-button").text("link 2");
       $("#next-button").text("link 4");
       $('#next-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[$(".nav-button").length - 2]) {
               $("#next-button").hide()
           }
           $("#prev-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $next = $el.parent().next();

           if ($next.length === 0) $next = $('#left-nav li:first');

           $next.find('a.nav-button').addClass('active');
           if ($next.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($next.prev().find('a.nav-button')[0].innerText);
           }
           if ($next.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($next.next().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $next.find('a.nav-button').attr('href');

       });


       $('#prev-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[1]) {
               $("#prev-button").hide()
           }
           $("#next-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $prev = $el.parent().prev();

           if ($prev.length == 0) $prev = $('#left-nav li:last');

           $prev.find('a.nav-button').addClass('active');
           if ($prev.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($prev.next().find('a.nav-button')[0].innerText);
           }
           if ($prev.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($prev.prev().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $prev.find('a.nav-button').attr('href');

       });
   });