Question

我处理图像切换，首先点击应该隐藏图像，第二次点击应该再次显示图像。我有一些工作，但问题是，第一次点击它什么也没做，第二次点击切换开始。希望我的代码中有一些问题。请建议

<img src="img/1.jpg" width="449" height="600" class="one" id="one" style="opacity=1">
<img src="img/2.jpg" width="450" height="600" class="two">

function toggle(obj) {
    var el = document.getElementById("one");

    if ( el.style.opacity != 0 ) {
        el.style.opacity = 0;
    }
    else {
        el.style.opacity = 1;
    }
}

one.addEventListener("click", toggle, false);

Answer 1

style="opacity=1"应为style="opacity:1"。正如您所写的那样，该规则无效且将被忽略，因此首次单击该元素会将不透明度设置为1（无论如何这是默认值）。

nb，您可以将您的功能重构为：

function toggle(obj) {
    var el = document.getElementById("one");

    el.style.opacity = +!+el.style.opacity;
    // or, using bitwise XOR assignment to keep @Raynos happy
    // el.style.opacity ^= 1;
}

工作演示：http://jsfiddle.net/AndyE/se29y/

这会转换字符串中的当前值，例如"1"到一个数字，例如1，然后否定该数字的“真实性”!1 === false，然后在将结果布尔值分配给opacity之前将其再次转换回数字。这意味着每次单击都会将值切换为相反的值。

当然，正如@casablanca's answer指出的那样，visibility更适合（并且得到更广泛支持）就地隐藏元素，但隐藏的元素无法再次显示（谢谢@Shadow Wizard）。

Answer 2

请勿使用opacity来显示/隐藏元素 - 请使用visibility代替值visible或hidden。

Answer 3

function toggle(obj) {
    var el = document.getElementById("one");

    el.style.opacity = el.style.opacity^1;
}

因为在单个表达式中转换为整数两次是愚蠢的。

Answer 4

不幸的是，不出所料，每个浏览器都有自己的不透明度实现..所以这里是跨浏览器（IE，Chrome，Firefox）版本的原始代码：

function Toggle(element) {
    var curOpacity;
    if (typeof element.style.filter != "undefined") {
        curOpacity = parseInt(element.style.filter.split("=")[1]);
        if (isNaN(curOpacity))
            curOpacity = 100;
        element.style.filter = "alpha (opacity=" + (100 - curOpacity) + ")";
    }
    else {
        curOpacity = element.style.opacity || 1;
        element.style.opacity = +!+curOpacity;
    }
}

要在页面加载时对所有图像应用此功能：

window.onload = function() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++)
        images[i].onclick = function() { Toggle(this); };
}

与可爱猫咪一起工作测试案例：http://jsfiddle.net/2sXVQ/2/：）

Javascript切换

4 个答案: