<分区>
关闭 9 年前。
- 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
- 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。
标签 javascript html css
<分区>
关闭 9 年前。
所以我是 JS 的新手并写了这篇文章。基本上，我用绝对位置和 0 不透明度堆叠图像，当您单击一个按钮时，它会将图片的不透明度设为 1，然后将其余图片的不透明度设为 0。其中还有一个过渡效果。无论如何，如果您查看我代码中的 JavaScript，我的问题是:
A:我这样做对吗？ B:有没有更好的方法不用那么多代码？
相关代码如下:
<div id="navwrap">
<a href="#" onclick="toggle()">pic 1</a>
<a href="#" onclick="toggle2()">pic 2</a>
<a href="#" onclick="toggle3()">pic 3</a>
<a href="#" onclick="toggle4()">pic 4</a>
</div>
<img id="pic1" class="pic" src="http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg">
<img id="pic2" class="pic" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/nature-landscape-hd-wallpapers-widescreen-nature-desktop-images.jpg">
<img id="pic3" class="pic" src="http://images.fanpop.com/images/image_uploads/JAPAN-LANDSCAPE-japan-419407_1920_1440.jpg">
<img id="pic4" class="pic" src="http://www.personaltouchcolorado.com/wp-content/uploads/2013/01/Lawn-Landscape.jpg">
<script>
var w=document.getElementById('pic1');
var x=document.getElementById('pic2');
var y=document.getElementById('pic3');
var z=document.getElementById('pic4');
</script>
<script>
function toggle()
{
if (w.style.opacity=='0')
{
w.style.opacity='1';
}
else
{
w.style.opacity='0';
}
if (w.style.opacity=='1')
{
w.style.opacity='1';
}
else
{
w.style.opacity='1';
}
{
x.style.opacity='0';
}
{
y.style.opacity='0';
}
{
z.style.opacity='0';
}
}
</script>
<script>
function toggle2()
{
if (x.style.opacity=='1')
{
x.style.opacity='0';
}
else
{
x.style.opacity='1';
}
if (x.style.opacity=='1')
{
x.style.opacity='1';
}
else
{
x.style.opacity='1';
}
{
w.style.opacity='0';
}
{
y.style.opacity='0';
}
{
z.style.opacity='0';
}
}
</script>
<script>
function toggle3()
{
if (y.style.opacity=='1')
{
y.style.opacity='0';
}
else
{
y.style.opacity='1';
}
if (y.style.opacity=='1')
{
y.style.opacity='1';
}
else
{
y.style.opacity='1';
}
{
w.style.opacity='0';
}
{
x.style.opacity='0';
}
{
z.style.opacity='0';
}
}
</script>
<script>
function toggle4()
{
if (z.style.opacity=='1')
{
z.style.opacity='0';
}
else
{
z.style.opacity='1';
}
if (z.style.opacity=='1')
{
z.style.opacity='1';
}
else
{
z.style.opacity='1';
}
{
w.style.opacity='0';
}
{
x.style.opacity='0';
}
{
y.style.opacity='0';
}
}
</script>
最佳答案
参数化调用:
<a href="#" onclick="toggle(1)">pic 1</a>
<a href="#" onclick="toggle(2)">pic 2</a>
<a href="#" onclick="toggle(3)">pic 3</a>
<a href="#" onclick="toggle(4)">pic 4</a>
并制作一个更智能的函数:
function toggle(id)
{
var el = document.querySelectorAll('.pic');
for(var i = 0; i != el.length; i++)
el[i].style.opacity = 0;
document.getElementById('pic'+id).style.opacity = 1;
}
document.querySelectorAll 仅适用于较新的浏览器(特别不适用于 IE8 或更低版本)，但这是相当学术的 - 在生产站点上，您将使用像 Mootools 或 jQuery 这样的库来抽象它在下面。
关于javascript - 有没有更简单的方法来实现多个 if else JavaScript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20713827/
相关文章：
javascript - Firefox javascript错误函数 "undefined"在IE中工作正常
javascript - AngularJS ng-template with ng-messages-include
javascript - 响应式设计。 float div 的网格布局，但有一个异常(exception)
javascript - 导航 100% 分布在一个 div 中，填充均匀
html - overflow 仅适用于元素符号，不适用于 li 的内容
javascript - OpenLayers MouseUp 事件 - 鼠标仍然拖动 map
Javascript 性能 : multiple fooBaz VS multiple Foo. Bar.Baz