javascript - 加载特定 div 时隐藏元素

Question

我有一个 HTML 文件，其中有 3 个 div 和 2 个按钮。该页面的功能是通过单击同一页面上的下一个按钮在 3 个 div 之间进行遍历。显然我也有上一个按钮可以返回到上一个div。我有一个用于此功能的 jquery 函数。现在，我想隐藏 div1 中的上一个按钮和 div3 中的下一个按钮。我无法找到任何这方面的指导。请在下面找到我的 div 代码

<div id="divs">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>
<input type="submit" value="Next" id="next">
<input type="submit" value="Previous" id="prev">    

请在下面找到我的脚本代码

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divs div").each(function(e) {
    if (e != 0) {
        $(this).hide();

    } 
}); 


$("#next").click(function(){
    if ($("#divs div:visible").next().length != 0)
        $("#divs div:visible").next().show().prev().hide();
    else {
        $("#divs div:visible").hide();
        $("#divs div:first").show();
    }
    return false;
});

$("#prev").click(function(){
    if ($("#divs div:visible").prev().length != 0)
        $("#divs div:visible").prev().show().next().hide();
    else {
        $("#divs div:visible").hide();
        $("#divs div:last").show();
    }
    return false;
});

});

Answer 1

已修复 - http://jsfiddle.net/rj3gouvd/1/

要实现此目的，请将此检查方法添加到您的代码中，并在每次单击下一个按钮或上一个按钮时调用它。

基本上，我们在这里所做的事情非常简单。

检查父 DIV 内当前可见 DIV 之后是否没有 DIV，隐藏下一个按钮，如果父 DIV 内当前可见 DIV 之前没有 DIV，则隐藏上一个按钮

 var check = function () {
        if ($("#divs div:visible").next().length == 0) {
            $('#next').hide();
        } else {
            $('#next').show();
        }
        if ($("#divs div:visible").prev().length == 0) {
            $('#prev').hide();
        } else {
            $('#prev').show();
        }
    };