jquery - 在第一页/最后一页上隐藏上一页/下一页按钮

Question

好的，我已经进行了一些搜索，但我找不到任何适合我的代码的东西，所以我想我会试一试。

我正在为我的页面构建一个幻灯片式导航(主要作为学习练习)，我希望能够隐藏第一张幻灯片上的“上一张”按钮和最后一张幻灯片上的“下一张”按钮，但我似乎无法让它工作。

这是我目前所拥有的:

HTML

<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>

<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">
        prev
    </div>
    <div class="next">
        next
    </div>
</div>

jquery

var main = function() { 
    if($('.active-slide').hasClass('first')) {
       $('.prev').hide(); 
} else if ($('.active-slide').hasClass('last')) {
           $('.next').hide();
} else {
    $('.prev').show();
    $('.next').show();
}
$('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

//if nextslide is last slide, go back to the first
        if(nextSlide.length===0) {
            nextSlide = $('.slide').first();
        } 

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

    });

//prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');

        if(prevSlide.length===0) {
            prevSlide = $('.slide').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
    });

};

$(document).ready(main);

这是 JSFiddle用同样的东西。我觉得有比在我的第一张和最后一张幻灯片上使用“第一”和“最后”类更好的方法，但我认为这可能更容易。不过，我愿意接受所有建议!

Answer 1

请参阅更正后的 fiddle :http://jsfiddle.net/794f4yvw/12/我添加了上一个/下一个检查作为一个单独的函数，并在每次切换幻灯片时调用:

function checkNavigation() {

    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.prev').show();
        $('.next').show();
    }

}