Question

我有一个HTML文件，它有3个div和2个按钮。页面的功能是通过单击同一页面上的下一个按钮在3 div之间进行遍历。显然我也有之前的按钮回到上一个div。我有一个jquery函数用于此功能。现在，我想在div3中隐藏上一个按钮，在div3中隐藏 next 按钮。我无法找到任何指导。请在下面找到我的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，隐藏下一个按钮AND，如果父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();
        }
    };

Answer 2

还提供了说明完整工作解决方案的jsBin。

解决方案的核心代码是：

$(document).ready(function(){
   $("#divs div").each(function(e) {
     if (e !== 0) {
       $(this).hide();
     }
   });


// If the next button is clicked ...
  $("#next").click(function(){
    $("#divs div:visible").hide().next().show();
    if ($("#divs div:visible").next().length == 0) {
      $("#next").hide();
    }
    $("#prev").show();
  });

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

另请注意，它改进了选择显示哪个div。以前你编码过：

$("#divs div:visible").next().show().prev().hide();

其中基本上说“转到下一个，显示它，返回一个并隐藏它”。

这可以简化为：

$("#divs div:visible").hide().next().show();

表示隐藏当前，转到下一个并显示它。这在语义上与您的代码相同，但步骤较少。

我还建议不要在按钮上使用hide（）和show（），这会导致它们“跳舞”，而是将它们的样式更改为“visibility：hidden;”和“能见度：可见;”这会使他们在保持阵地的同时出现和消失。

加载特定div时隐藏元素

2 个答案: