CODEWITHSUNDEEP
jqueryhtml
Mr.T.K
Mr.T.K

Reputation: 2356

Jquery Next and prev Button work

I have done next and prev button functionality. I need to make it so that what happens when I click on the next button, then the same thing happen reversely when clicking on the previous button.

Here I have worked fiddle Link: http://jsfiddle.net/thilakar/t8v5P/

$(function() {
    //var a = '.mainList';
    var a = 0;
    var b = 2;
    $('#next').click(function() {
        var x = 0;
        var z = $('.mainList').length;
        $('.mainList').each(function() {
            if(a == x){
                var inner_li = $('#'+a+' ul li').length;
                for( c=1; c<=inner_li; c++ ){
                    if (c == b) {
                        if ($('#'+a+'_'+c)) {
                            $('#'+a+'_'+c).show();
                        }
                    } else {
                            $('#'+a+'_'+c).hide();
                    }
                    if(b > inner_li) {
                        if (x < z-1) {
                            $('#'+a).hide();
                            a++;
                            $('#'+a).show();
                            b=1;
                        }
                    }
                }
            }
            x++;
        });
        b++;
    }); 

});

Please help me out.

Upvotes: 2

Views: 2875

Answers (3)

codef0rmer
codef0rmer

Reputation: 10530

here is the solution in pure jQuery way. 

$('#next').click(function() {
        var activeLiId = $('li.mainList:visible').attr('id');

        if ($('li#'+activeLiId+' > ul > li:visible').next().length == 1) {
            $('li#'+activeLiId+' > ul > li:visible').hide().next().show();
        } else if ($('li.mainList:visible').next().length == 1) {
            $('li.mainList:visible').hide().next().show().find('ul > li:first').show();
        }

        if ($('li.mainList:visible').next().length == 0
            && $('li.mainList:visible').find('ul > li:visible').next().length == 0
        ) {
             $(this).attr('disabled', true);   
        } else {
            $('#prev').attr('disabled', false);
        }
    });

    $('#prev').click(function() {
        var activeLiId = $('li.mainList:visible').attr('id');

        if ($('li#'+activeLiId+' > ul > li:visible').prev().length == 1) {
            $('li#'+activeLiId+' > ul > li:visible').hide().prev().show();
        } else if ($('li.mainList:visible').prev().length == 1) {
            $('li.mainList:visible').hide().prev().show().find('ul > li:last').show();
        }

        if ($('li.mainList:visible').prev().length == 0
            && $('li.mainList:visible').find('ul > li:visible').prev().length == 0
        ) {
             $(this).attr('disabled', true);   
        } else {
            $('#next').attr('disabled', false);
        }
    }).attr('disabled', true);

Demo : http://jsfiddle.net/t8v5P/6/

Upvotes: 2

Parag Gajjar
Parag Gajjar

Reputation: 730

Try using this script, it is much smaller and does all

$(document).ready(function(e) {
    var allMenifest = $(".mainList ul li");
    var init = 0;

    $("#prev").click(function(e) {
        showme("prev");
    });

    $("#next").click(function(e) {
        showme("next");
    });


    function showme(e){
        allMenifest.eq(init).parent("ul").parent(".mainList").hide();
        allMenifest.eq(init).hide();

        if(e == "next"){
            init++;     
            }else{
            init--; 
            }

            if(init <= 0){init = allMenifest.length;}else if(init >= allMenifest.length){init = 0;}

            allMenifest.eq(init).parent("ul").parent(".mainList").show();
            allMenifest.eq(init).show();
    }

});

Working example is at JSFiddle

Upvotes: 2

Christian
Christian

Reputation: 19750

That code can be made a lot simpler and more readable using some nice jQuery functions. I've refactored it for you and made a prev function too. No doubt my code could be refactored even better again, but I'll leave that up to you.

See it live at http://jsfiddle.net/t8v5P/5/

$('#next').click(function() {
    var active_item = $('#slideShow').find('li.slideshow_item:visible');

    if ( active_item.is(':last-child') ) {
        var active_main = active_item.closest('.mainList');

        if ( active_main.is(':last-child') ) return;

        active_item.hide();
        active_main
            .hide()
            .next()
                .show()
                .find('li.slideshow_item:first').show();
    }
    else {
        active_item.hide();
        active_item.next().show();
    }
});

$('#prev').click(function() {
    var active_item = $('#slideShow').find('li.slideshow_item:visible');

    if ( active_item.is(':first-child') ) {
        var active_main = active_item.closest('.mainList');

        if ( active_main.is(':first-child') ) return;               

        active_item.hide();
        active_main
            .hide()
            .prev()
                .show()
                .find('li.slideshow_item:last').show();
    }
    else {
        active_item.hide();
        active_item.prev().show();
    }
});

If you want to know how anything works just let me know and I'll explain it. Don't say we're not nice :)

Upvotes: 2

Related Questions