加載特定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時隱藏元素

回答

相關問題