jquery - 对于最后一 block 隐藏按钮

Question

我正在尝试创建一个测试页

为最后一 block 隐藏按钮

我的代码:

Fiddle

    $("#test_inner .test-item").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next-btn").click(function(){
        if ($("#test_inner .test-item:visible").next().length != 0)
            $("#test_inner .test-item:visible").next().show().prev().hide();
        else {
            $("#test_inner .test-item:visible").hide();
            $("#test_inner .test-item:first").show();
        }
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="test_inner">					
    <div class="test-item">DIV1</div>
    <div class="test-item">DIV2</div>
    <div class="test-item">DIV3</div>
    <div class="test-item">DIV4</div>
    <div class="test-item">DIV5</div>
    
    <a href="#" class="next-btn">send</a>
</div>

如有任何帮助，我将不胜感激。

Answer 1

您可以设置一个计数器并检查最后一个元素。如果到达最后一个元素，则隐藏按钮。

这是更新后的代码:

var i = 0;
$(".next-btn").click(function(){
    i++;
    if(i == 4)
    {
           $(this).hide();
    }
    if ($("#test_inner .test-item:visible").next().length != 0)
        $("#test_inner .test-item:visible").next().show().prev().hide();
    else {
        $("#test_inner .test-item:visible").hide();
        $("#test_inner .test-item:first").show();
    }
    return false;
});