Javascript切换

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/se​​29y/

这将当前值从字符串转换"1"为数字,例如1,然后否定该数字的"真实性" !1 === false,然后在分配之前将结果布尔值再次转换回数字opacity.这意味着每次单击都会将值切换为相反的值.

当然,正如@ casablanca的答案所指出的那样,visibility对于元素的就地隐藏更为合适(并且得到更广泛的支持),但是不能再点击隐藏元素再次显示(感谢@Shadow向导).