javascript - 最後のクラスが表示された後にボタンを隠す

Question

私は次のものを持っています、

$("#slider1next").click(function () {
        $(".text:visible").next().show();
    });

最後のクラス (.text) が表示されたら、#slider1next を非表示にするにはどうすればよいですか?

http://jsfiddle.net/ma9ic/U2UZ4/3/

Answer 1

関数にコールバック関数を追加しshow()、インデックスを評価します。

$("#slider1next").click(function () {
    $(".text:visible").next().show(function() {  
        if($(this).index() == $('.text').length)
        {
            $('#slider1next').hide();
        }
    });
});

更新された jsFiddleを参照してください。

Answer 2

これを試して：

$("#slider1next").click(function () {
    var $next = $('.text:visible:last').next();
    $next.length ? $next.show() : $(this).hide();
});

フィドルの例

Answer 3

$("#slider1next").click(function () {
$(".text:visible").next().show();
if ($('.text:last').is(':visible')){
    $('#slider1next').hide();
}
});

最後の要素が表示されているかどうかを確認し、ボタンを非表示にします。 http://jsfiddle.net/U2UZ4/12/

Answer 4

表示可能な長さがすべてのテキストの長さと等しいかどうかを確認できます。

http://jsfiddle.net/U2UZ4/6/

$("#slider1next").click(function () {
    if ($(".text:visible").length == $(".text").length) { $(this).hide(); }
    $(".text:visible").next().show();
});

Answer 5

が表示されているかどうかを確認してください。表示されている場合fourth_oneは非表示にしますslider1next

    $("#slider1next").click(function () {
    $(".text:visible").next().show();
    if($('#fourth_one').is(':visible'))
    {
        $('#slider1next').hide();
    }
});

ここにjsfiddleがあります

Answer 6

そのように、最後のショーの後に次のdivがあるかどうかを確認する必要があります

$("#slider1next").click(function () {
    var next = $(".text:visible:last").next();
    console.log(next);
    if (next.length > 0) {
        next.show();
    } else {
        $(this).hide();
    }
});