Question

我试图显示和隐藏＆＃34;下一步＆＃34; ＆安培; ＆＃34;上＆＃34;按钮，基于使用jquery显示的项目。如果您尝试点击＆＃34;上一页＆＃34; ＆安培; ＆＃34;接着＆＃34;按钮频繁，它只显示＆＃34; 6 7 8 9 10＆＃34;。但是，代码并不是一直在工作。

我的示例代码是

var p;
for(i=0;i<=$('#myList li').size(); i++){        
    p=i*20;
    $('#myList li:lt(5)').animate({"margin-left":"-"+p+"px"},1000).delay(5000);        

}
var $lis = $("#myList li").hide();
$lis.slice(0, 5).show();
var size_li = $lis.length;
var x = 5,
    start = 0;
$('#next').click(function () {
    if (start + x < size_li) {
        $lis.slice(start, start + x).hide();
        start += x;
        $lis.slice(start, start + x).show();            
        // Confused here
        if(parseInt(start) == 10) {
            $('#next').css('display','none');
        }
    }
    showHideButtons()
});
$('#prev').click(function () {
    if (start - x >= 0) {
        $lis.slice(start, start + x).hide();
        start -= x;
        $lis.slice(start, start + x).show();
    }
    showHideButtons();
});
function showHideButtons(){
    if (start == 0){
        $('#next').show();
        $('#prev').hide();
    }else if (start + x > size_li){
        $('#next').hide();
        $('#prev').show();
    }else{
        $('#next').show();
        $('#prev').show();
    } 
}
showHideButtons()

这是我的小提琴 http://jsfiddle.net/W4Km8/661/

非常感谢任何想法。

Answer 1

您可以直接使用.show()和.hide()方法，而不是.fadeIn("slow")和.fadeOut("slow")。

var n = 0,
    g = 3; // grouping number
$(document).ready(function () {
    $("#prev").hide();
    $("li").each(function (index) {
        if (index >= g) {
            $(this).hide()
        }
    })
})
$("button").click(function (e) {
    if (e.target.id == "next") {
        if (n + 1 < $("li").size() / g) {
            n += 1;
            $("li").each(function (index) {
                if (index < n * g) {
                    $(this).fadeOut("slow")
                } else if (index >= n * g && index < (n + 1) * g) {
                    $(this).fadeIn("slow")
                }
            })
        }
        if (n + 1 >= $("li").size() / g) {
            $(this).fadeOut("slow")
        } else {
            $("#prev").fadeIn("slow")
        }
    } else if (e.target.id == "prev") {
        if (n > 0) {
            n -= 1;
            $("li").each(function (index) {
                if (index >= n * g && index < (n + 1) * g) {
                    $(this).fadeIn("slow")
                } else if (index >= (n + 1) * g) {
                    $(this).fadeOut("slow")
                }
            })
        }
        if (n == 0) {
            $(this).fadeOut("slow")
        } else {
            $("#next").fadeIn("slow")
        }
    }
})

http://jsfiddle.net/W4Km8/698/

Answer 2

这是我的问题的小解决方案，使用自定义属性和类来控制值和按钮和li的状态。

var items_per_page = 5;

$(document).ready(function() { 

    init_list ();

});


function init_list() { // Initialize values and states for first time

    var size_list = $('#myList li').length;
    $('#myList').attr('data-size', size_list); // save total items in custom attribute
    $('#myList li:eq(0)').addClass('first_item_selected'); //first element of the list         
    $('#myList li').each(function() { // save position in custom attribute
      $( this ).attr('data-value', parseInt($(this).text()) - 1);
    });

    $('#prev').click(function() {
       var next_item_selected = parseInt($('.first_item_selected').attr('data-value')) - items_per_page;
        $('#myList li').removeClass('first_item_selected');
        $('#myList li:eq(' + next_item_selected + ')').addClass('first_item_selected');
        event_pagination(); // update buttons and li states
    });

    $('#next').click(function() {
        var next_item_selected = parseInt($('.first_item_selected').attr('data-value')) + items_per_page;
        $('#myList li').removeClass('first_item_selected');
        $('#myList li:eq(' + next_item_selected + ')').addClass('first_item_selected');
        event_pagination(); // update buttons and li states
    });

    event_pagination(); // update buttons and li states

}

function event_pagination() { // Update the buttons and li states with new position of the pagination
    if (($('.first_item_selected').attr('data-value') - items_per_page) > -1) {
        $('#prev').show();
    } else {
        $('#prev').hide();
    }

    if ($('#myList').attr('data-size') - $('.first_item_selected').attr('data-value' ) > items_per_page) {
        $('#next').show();
    } else {
        $('#next').hide();
    }


    $('#myList li').each(function() { // show-hide li from first element of pagination 
        var present_item = parseInt($( this ).attr('data-value'));
        var first_item = parseInt($('.first_item_selected').attr('data-value'));

        if (present_item < first_item) {
            $(this).hide();
        }  else {
            if  ((present_item) < (first_item + items_per_page)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        }

    });

}

我的JsFiddle链接：http://jsfiddle.net/dojoplus/W4Km8/679/

显示和隐藏＆＃34;下一步＆＃34;和＆＃34;上一页＆＃34;使用jquery基于显示元素的按钮

2 个答案: