1

表示したい記事の配列があります。次の矢印をクリックして次の記事に移動したり、前の矢印をクリックして前の記事に移動したりしたいと考えています。配列の最後の項目に到達したら、次の矢印を非表示にし、最初の項目についてはその逆を行います。

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

最初に矢印をクリックすると、次の記事に移動しますが、もう一度クリックすると、最初のクリック機能を終了できないため、何もしません。「戻る」を使用してみましたが、それも機能しませんでした。私を助けてください。

4

1 に答える 1

0

「次のページ」要素が 1 つと「前のページ」要素が 1 つしかないと仮定しています。その場合、そのために配列「マルチバブル」を使用する必要はありません。「マルチバブル」は文字列値の配列として設定できると想定しています。「次の矢印」要素は最初から表示されている可能性が高いため、「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();
    });
});
于 2013-09-06T22:17:20.833 に答える