Hiding Prev/Next buttons on first/last pages

问题

Okay, I've done some searching but I can't quite find anything that works for my code, so I thought I'd give it a shot.

I'm building a slideshow-type navigation for my page (mostly as a learning exercise) and I want to be able to hide the "Prev" button on the first slide and the "next" button on the last slide, but I can't seem to get it to work.

Here's what I have so far:

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

Here's the JSFiddle with the same thing. I feel like there is a better way to do it than using "first" and "last" classes for my first and last slides, but I thought this might be easier. I'm open to all suggestions though!

回答1:

please see the corrected fiddle: http://jsfiddle.net/794f4yvw/12/ I've added prev/next check as a separate function and call every time the slide is switched:

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

}

来源：https://stackoverflow.com/questions/25750067/hiding-prev-next-buttons-on-first-last-pages

标签

jquery

html