加载特定div时隐藏元素

我是网页开发的新手，所以如果这是一个愚蠢的问题，请和我一起裸照。我有一个HTML文件，它有3个div和2个按钮。通过单击同一页面上的下一个按钮，页面的功能是在3格之间进行遍历。显然我有以前的按钮也回到以前的div。我有这个功能的jQuery功能。现在，我想隐藏以前的按钮在div1和下按钮在div3中。我无法为此找到任何指导。请找我的div代码如下加载特定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; 
});

}）我的脚本代码;

来源

2014-11-03 Prabhu

A 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;”和“可见度：可见的”这会使他们在维持他们的位置的同时出现和消失。

来源

2014-11-03 23:38:52 Kolban

这里固定 - http://jsfiddle.net/rj3gouvd/1/

为了实现这一点，添加这种检查方法的代码，并调用它每次下一个按钮或上一个按钮被点击。

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

检查是否存在无资料核实父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(); 
     } 
    };

来源

2014-11-03 23:20:48 Ishita

加载特定div时隐藏元素

回答

相关问题