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;
}

只有在最近的浏p>

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点

缩进代码。
如果需要，请将switch语句用于此类方案。
对于这样的场景，使动态处理这种操作的函数成为可能其中一组物品必须以同样的方式处理。

有没有更简单的方法来复制if else JavaScript？

3 个答案: