有没有更简单的方法来多个JavaScript？

Question

所以我对JS很陌生，写了这个。基本上我用绝对位置和0不透明度堆叠图像，当你点击一个按钮时，它将图片的不透明度设置为1，然后将其余的图层设置为不透明度0.此外，还有一个过渡效果。无论如何，我的问题，如果你看我的代码中的JavaScript是：

答：我做对了吗？ 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> 

Answer 1

参数多态的电话：

<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这样的库，将它们抽象出来。

Answer 2

你的代码确实效率很低，但最大的问题是你的if/else循环写错了。

首先，if/else之后的{}开始一个'block'，不需要添加额外的{}。其次，你可以使用一个函数参数来设置目标图像，从而使你只需要一个函数就可以执行你的代码。

第三，目前硬编码的图像，他们都有一个类，你可以使用document.getElementsByTagName功能，并检查有其className属性设置为pic（如果你不关心支持旧的浏览器，如图片IE8及以下版本，您可以简单地使用document.querySelectorAll）

Answer 3

进一步解释了Niels关于使用jQuery的说法，您可以使用以下代码执行此操作。

包括jQuery的文档

function toggle(id){ 
    $('.pic').css('opacity', '0'); 
    $('#pic'+id).css('opacity', '1'); 
} 

中除了记3分

1. 缩进代码。
2. 如果需要，可以使用switch语句来处理这种情况。
3. 对于这样的场景使得功能动态地处理这样的操作 其中一组项必须以相同的方式处理。