我想更改我的JavaScript：
function SwapDivsWithClick(div1,div2,div3)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
d3 = document.getElementById(div3);
if( d2.style.display & d3.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
else
{
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}<p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:SwapDivsWithClick('swapper-first','swapper-other', 'swapper-3')">(Swap Divs)</a>
</p>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<div id="swapper-3" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
如果我单击(Swap divs)，则什么都不会发生，但是，如果删除d3和div3和else，它将起作用。
如您所见，我是JavaScript新手。我在做什么错了？
答案 0 :(得分：3)
您不能将else放在另一个else的末尾。如果您有：
if (condition) {
// A
} else {
// B
}
然后涵盖了所有替代方法，没有else可以做的三分之一。
相反，您使用else if：
if (condition1) {
// A
else if (condition2) {
// B
} else {
// C
}
如果condition1不正确，它将测试condition2，如果那不正确，它将进入最后的else。
因此，您可以通过在else if中添加其他条件来修正代码，请参见注释：
function SwapDivsWithClick(div1,div2,div3)
{
// Always declare your variables!
var d1 = document.getElementById(div1);
var d2 = document.getElementById(div2);
var d3 = document.getElementById(div3);
// Check them in order
if (d1.style.display == "block")
{
// Switch from d1 to d2
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
else if (d2.style.display === "block")
{
// Switch from d2 to d3
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
else
{
// Switch from d3 to d1
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}<p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:SwapDivsWithClick('swapper-first','swapper-other', 'swapper-3')">(Swap Divs)</a>
</p>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<div id="swapper-3" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
The third div
</p>
</div>
但是：我不会那样做。相反，我将所有这些div放在一个容器中，然后使用一个类来显示其中一个：
function SwapDivsWithClick(containerId)
{
// Get the swappable divs within the container
var divs = document.querySelectorAll("#" + containerId + " > .swappable");
// Loop through until we find the one that's showing
for (var n = 0; n < divs.length; ++n) {
var div = divs[n];
if (div.classList.contains("showing")) {
// Find the "next" one, looping back to the beginning if we're
// at the end. That `(index + 1) % length` trick is a useful one
// to remember: We'll go 0 -> 1 -> 2 -> 0 -> 1...
var nextDiv = divs[(n + 1) % divs.length];
// Hide the one that's currently showing, show the next
div.classList.remove("showing");
nextDiv.classList.add("showing");
// Break the loop, since we found it
break;
}
}
}.swappable {
display: none;
}
.showing {
display: block;
}<p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:SwapDivsWithClick('swap-container')">(Swap Divs)</a>
</p>
<div id="swap-container">
<div class="swappable showing" style="border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div class="swappable" style="border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<div class="swappable" style="border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
The third div
</p>
</div>
</div>
旁注：您在这里不需要它，但是对于逻辑或运算，您使用&&，而不是&。
答案 1 :(得分：1)
当添加第三个“可能性”时，必须告诉程序这种可能性的条件是什么。您使用了两个else，而没有else if。
我为您更改了此设置，您可以看到，我检查了两个条件：
此外，如果您要同时检查两个条件
if(d2.style.display & d3.style.display == "none")
您将必须分两个步骤进行操作：
if( d2.style.display == "none" && d3.style.display == "none" )
最后一件事：javaScript中的逻辑运算符对&&使用and，对||使用or。
我添加了代码段供您试用。让我知道这是否对您有帮助！
function SwapDivsWithClick(div1,div2,div3)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
d3 = document.getElementById(div3);
if( d2.style.display == "none" && d3.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
} else if ( d1.style.display == "none" && d3.style.display == "none") {
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
} else {
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}<p style="text-align:center; font-weight:bold; font-style:italic;">
<button onclick="SwapDivsWithClick('swapper-first','swapper-other', 'swapper-3')">(Swap Divs)</button>
</p>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked once.
</p>
</div>
<div id="swapper-3" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked twice.
</p>
</div>
编辑：哦！我想我来晚了。格式化此答案花了很长时间。