Javascript does not not div visibility

-1

我正在研究一個腳本，它允許我更改哪個div可見，但現在它不起作用，我無法弄清楚爲什麼。Javascript does not not div visibility

有人可以幫我找到解決方案嗎？

HTML

<div id="send2" style="visibility: hidden; position: absolute"> 
    <iframe src="http://en.wikipedia.org/wiki/Mascarene_martin" name="send a request" width="960px" height="577px" frameborder="0" scrolling="yes"> 
    </iframe> 
</div> 

<div id="send3" style="visibility: hidden; position: absolute"> 
    <iframe src="http://en.wikipedia.org/wiki/Acacia_cultriformis" name="send a request" width="960px" height="577px" frameborder="0" scrolling="no"> 
    </iframe> 
</div> 

<div id="send4" style="visibility: hidden; position: absolute"> 
    <iframe src="http://en.wikipedia.org/wiki/Battle_of_Halmyros" width="960px" height="577px" frameborder="0" scrolling="no"> 
    </iframe> 
</div> 

<div id="send5" style="visibility: hidden; position: absolute"> 
    <iframe src="http://en.wikipedia.org/wiki/New_Detroit_Arena" width="960px" height="577px" frameborder="0" scrolling="no"> 
    </iframe> 
</div> 

<div id="nav_buttons"> 
    <button id="previous" onclick="SwitchPageBackward()" style="margin-top: 614px">Previous 
    </button>   
    <button id="next" onclick="SwitchPageForward()" style="margin-top: 614px">Next 
    </button> 
</div>

腳本

Page1.style.visibility="visible" 
Page2.style.visibility="hidden" 
Page3.style.visibility="hidden" 
Page4.style.visibility="hidden" 
Page5.style.visibility="hidden" 

function SwitchPageForward() { 
var Page1 = document.getElementById("send1"); 
var Page2 = document.getElementById("send2"); 
var Page3 = document.getElementById("send3"); 
var Page4 = document.getElementById("send4"); 
var Page5 = document.getElementById("send5"); 

if (Page4.style.visibility == "visible") { 
Page4.style.visibility="hidden"; 
Page5.style.visibility="visible"; 
} 

if (Page3.style.visibility == "visible") { 
Page3.style.visibility="hidden"; 
Page4.style.visibility="visible"; 
} 

if (Page2.style.visibility == "visible") { 
Page2.style.visibility="hidden"; 
Page3.style.visibility="visible"; 
} 
else if (Page2.style.visibility == "visible") { 
Page2.style.visibility="hidden"; 
Page3.style.visibility="visible"; 
} 
if (Page1.style.visibility == "visible"){ 
Page1.style.visibility="hidden"; 
Page2.style.visibility="visible"; 
} 
else if (Page1.style.visibility == "visible") { 
Page1.style.visibility="hidden"; 
Page3.style.visibility="visible"; 
} 
else if (Page1.style.visibility == "visible") { 
Page1.style.visibility="hidden"; 
Page4.style.visibility="visible"; 
} 
} 
function SwitchPageBackward() { 
var Page1 = document.getElementById("send1"); 
var Page2 = document.getElementById("send2"); 
var Page3 = document.getElementById("send3"); 
var Page4 = document.getElementById("send4"); 
var Page5 = document.getElementById("send5"); 

if (Page2.style.visibility == "visible") { 
Page2.style.visibility="hidden"; 
Page1.style.visibility="visible"; 
} 

if (Page3.style.visibility == "visible") { 
Page3.style.visibility="hidden"; 
Page2.style.visibility="visible"; 
} 
else if (Page3.style.visibility == "visible") { 
Page3.style.visibility="hidden"; 
Page1.style.visibility="visible"; 
} 

if (Page4.style.visibility == "visible") { 
Page4.style.visibility="hidden"; 
Page3.style.visibility="visible"; 
} 
else if (Page4.style.visibility == "visible") { 
Page4.style.visibility="hidden"; 
Page2.style.visibility="visible"; 
} 
else if (Page5.style.visibility == "visible") { 
Page4.style.visibility="hidden"; 
Page1.style.visibility="visible"; 
} 

if (Page5.style.visibility == "visible") { 
Page4.style.visibility="hidden"; 
} 

}

當我點擊下一步，我想page_x成爲無形和page_x + 1成爲可見。（以前的按鈕會扭轉這個過程）。

的jsfiddle：http://jsfiddle.net/6Lpq8p5x/

來源

2014-10-06 Macjeje

（哎呀，沒注意到滾動條...） – 2014-10-06 18:52:23

你在你的代碼的一個主要錯誤：你去在功能之外很好'var Page1'。這使得它成爲一個全局變量。然後在每個函數內部定義'Page1'作爲全局變量，覆蓋前面的語句。爲什麼？ – 2014-10-06 18:56:24

對不起，我還是新來的JavaScript。所以基本上我需要在我的函數中定義我的變量？我現在要試試它。 – Macjeje 2014-10-06 19:04:33

我的朋友，如果你的代碼這樣，你會在兆字節來寫它的JavaScript，請參閱的jsfiddle叉：http://jsfiddle.net/sameersemna/p5yzLL18/

function hideAllPages(){ 
    for(var i=1; i<=5; i++){ 
     document.getElementById("send"+i).style.visibility="hidden"; 
    } 
} 


function switchPageForward() { 
    if(current_page<5){ 
     current_page++; 
     hideAllPages();  document.getElementById("send"+current_page).style.visibility="visible"; 
    } 
} 
function switchPageBackward() { 
    if(current_page>1){ 
     current_page--; 
     hideAllPages(); 
document.getElementById("send"+current_page).style.visibility="visible"; 
    } 
} 



hideAllPages(); 
var current_page = 0; 
switchPageForward();

來源

2014-10-06 19:15:11

哇，你的代碼實際上比我的簡單，它的工作原理。我會研究你如何編寫你的代碼，並以相同的方式格式化我的下一個代碼。謝謝！ – Macjeje 2014-10-06 19:20:43

歡迎來到我的朋友Javascripting世界。幫你學習jQuery。幫我一個忙upvote :) – 2014-10-06 19:23:07

-1

首先，請像你有沒有硬編碼的每個條目。使用索引來指定哪些div應該可見，並在回調中僅顯示一個div，並隱藏其他div。

（如果需要，我可以提供更多的細節。）

像這樣的東西應該工作（但不是出於某種原因;-)）：

var index = 1; 
function SwitchPageForward() { 
    alert('foo'); 
    document.getElementById("send"+index).style.visibility = "hidden"; 
    index++; 
    document.getElementById("send"+index).style.visibility = "visible"; 
} 
function SwitchPageBackward() { 
    document.getElementById("send"+index).style.visibility = "hidden"; 
    index--; 
    document.getElementById("send"+index).style.visibility = "visible"; 
}

來源

2014-10-06 18:56:32

這應該是一個評論 – 2014-10-06 18:57:07

我認爲它作爲答案合格，因爲「使用索引來指定哪些div應該是可見的」部分。 – 2014-10-06 18:58:17

感謝您告訴我，我會盡量讓它更簡單/更易於理解。 – Macjeje 2014-10-06 19:07:00

Javascript does not not div visibility

回答

相關問題