Question

我正在编写一个允许我更改哪个div可见的脚本，但是现在它确实无法正常工作，我无法弄清楚原因。

有人可以帮我找到解决方案吗？

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/

Answer 1

我的朋友，如果您编写这样的Javascript，您将以兆字节编写，请参考JSFiddle Fork：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();

Answer 2

首先，请不要像你一样对每个条目进行硬编码。使用索引指定哪个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";
}

Javascript不会切换div可见性

2 个答案: