Question

我想要显示一系列文章。我希望能够点击下一个箭头移动到下一篇文章，或者前一个箭头移动到上一篇文章。当我到达数组中的最后一项时，我想隐藏第一个项目的下一个箭头，反之亦然。

$(function () {

    var i = 0


    $(multibubbles[i]).appendTo('#page');
    $(multibubbles[i]).children('#next-arrow').show();

        $(multibubbles[i]).children('#next-arrow').click(function (e) {
            $(multibubbles[i]).hide();
            i++;
            $(multibubbles[i]).appendTo('#page');
            if (i == multibubbles.length - 1) {
                $(multibubbles[i]).children('#next-arrow').hide();
            }
            else {
                $(multibubbles[i]).children('#next-arrow').show();
            }
            $(multibubbles[i]).children('#prev-arrow').show();
        })

        $(multibubbles[i]).children('#prev-arrow').click(function (e) {
            $(multibubbles[i]).hide();
            i--
            $(multibubbles[i]).appendTo('#page');
            if (i == 0) {
                $(multibubbles[i]).children('#prev-arrow').hide();
            }
            else {
                $(multibubbles[i]).children('#prev-arrow').show();
            }
            $(multibubbles[i]).children('#next-arrow').show();
        })
})

当我第一次点击箭头时，它会很好地转到下一篇文章，但是如果我再次点击它它什么也没做，因为我无法让它退出第一个点击功能。我尝试使用'return'，但这也不起作用。请帮帮我。

Answer 1

我假设您只有一个“下一页”元素和一个“上一页”元素。在这种情况下，不需要使用数组“multibubbles”。我假设“multibubbles”可以设置为字符串值数组。由于您的“下一个箭头”元素可能开始可见，因此无需使用“show（）”。如果你想让它不可见，只需改变id'＃next-arrow'的css显示。另外，将'＃prev-arrow'设置为最初隐藏在css中。

$(document).ready(function() {
    multibubbles[1] = 'blah blah';
    multibubbles[2] = 'blah blah';
    ...

    var numarticles = multibubbles.length;
    var i=0;
    $('#next-arrow').click(function () {
        i++;
        if (i == (numarticles-1)) {
            $('multibubbles[i]').show();
            $('#next-arrow').hide();
            i = numarticles-1;
        }
        $('#prev-arrow').show();
    });

    $('#prev-arrow').click(function () {
        i--;
        if (i == 0) {
            $(multibubbles[i]).show();
            $(#prev-arrow).hide();
            i=0;
        }
        $('#next-arrow').show();
    });
});

如何在阵列中来回移动？

1 个答案: