Question

我已经完成了next和prev按钮功能。我需要做到这一点，以便当我点击下一个按钮时会发生什么，然后点击上一个按钮时会发生相反的事情。

我在这里工作过小提琴链接：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++;
    }); 

});

请帮帮我。

Answer 1

使用一些不错的jQuery函数可以使代码更简单，更易读。我已经为你重构了它并且也做了一个prev函数。毫无疑问，我的代码可以再次被重构，但我会把它留给你。

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

如果你想知道有什么用，请告诉我，我会解释一下。不要说我们不好：）

Answer 2

尝试使用此脚本，它会小得多，并且全部

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

});

工作示例位于JSFiddle

Answer 3

这是纯jQuery方式的解决方案。

$('#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);

演示：http://jsfiddle.net/t8v5P/6/

Jquery Next和prev Button工作

3 个答案: