Question

我正在尝试在显示屏中添加一个li并删除一个li。我告诉你清楚，最初我看到1 2 3 4 5，当我点击“下一步”按钮时，我应该看到2,3,4,5,6等等。它也应该与“上一个”按钮相同。

但是，我对代码感到困惑

$('#myList li').hide();
$('#myList li:lt(5)').show();
$('#prev').on('click', function () {
    var visible = $('#myList li:visible:first').prevAll('li:lt(5)');
    if (visible.length > 1) {
        $('#myList li').hide();
    }

    if (visible.last().is($('#myList li').first())) {
        $(this).hide();
    }
    $('#next').show();
    visible.show()
});
$('#next').on('click', function () {
    var visible = $('#myList li:visible:last').nextAll('li:lt(5)')
    if (visible.length > 1) {
        $('#myList li').hide();
    }
    if (visible.last().is($('#myList li').last())) {
        $(this).hide();
    }
    $('#prev').show();
    visible.show()
});

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

Answer 1

您可以使用以下代码段：

$('#myList li:not(:lt(5))').hide();
var liLength = $('#myList li').length;
$('#prev').on('click', function () {
    var indexVisible = $('li:visible:first').index() - 1;
    if (indexVisible > -1) {
        $('#myList li').eq(indexVisible).show();
        $('li:visible:last').hide();
    }
});
$('#next').on('click', function () {
    var indexVisible = $('li:visible:last').index() + 1;
    if (indexVisible < liLength) {
        $('#myList li').eq(indexVisible).show();
        $('li:visible:first').hide();
    }
});

--DEMO--

Answer 2

http://jsfiddle.net/vikramjakkampudi/W4Km8/681/

只需更改两行

$('#prev').on('click', function () {
    var visible = $('#myList li:visible:last').prevAll('li:lt(5)');//change here
    if (visible.length > 1) {
        $('#myList li').hide();
    }

    if (visible.last().is($('#myList li').first())) {
        $(this).hide();
    }
    $('#next').show();
    visible.show()
});
$('#next').on('click', function () {
    var visible = $('#myList li:visible:first').nextAll('li:lt(5)')//change here
    if (visible.length > 1) {
        $('#myList li').hide();
    }
    if (visible.last().is($('#myList li').last())) {
        $(this).hide();
    }
    $('#prev').show();
    visible.show()
});

Answer 3

这可能适合你。

    $('#myList li').hide();
    $('#myList li:lt(5)').show();
    $('#prev').on('click', function () {
        var visible = $('#myList li:visible:first').prevAll('li:lt(1)');
        if (visible.length > 1) {
            $('#myList li').hide();
        }

        if (visible.last().is($('#myList li').first())) {
            $(this).hide();
        }
        $('#next').show();
        $('#myList li:visible:last').hide();
        visible.show()
    });
    $('#next').on('click', function () {
        var visible = $('#myList li:visible:last').nextAll('li:lt(1)')
        if (visible.length > 1) {
            $('#myList li').hide();
        }
        if (visible.last().is($('#myList li').last())) {
            $(this).hide();
        }
        $('#prev').show();
        $('#myList li:visible:first').hide();
        visible.show()
    });

添加一个li并使用jquery删除一个li

3 个答案:

--DEMO--