使用按钮在两个状态之间切换

Question

我想使用一个按钮来通过CSS的z-index将

提到前面，再次按下该按钮时，我希望它恢复到原始状态。

这是我目前所拥有的代码，第一次改变很好用，但它不会恢复原样。

function thumbnail(){
    if (document.getElementById("div").style.zIndex= -3){
        document.getElementById("div").style.zIndex= -2;
    }

    if  (document.getElementById("div").style.zIndex= -2){
        document.getElementById("div").style.zIndex= -3;
    }       
}

- afield

---

用 = 表示赋值，用 == 表示比较。 - onon15

你的第二个 if 需要改为 else！否则两个代码块总是按顺序执行。当第一个更改为 -2 时，第二个将立即将其更改回 -3。 - Michael Berkowski

@onon15所指的具体是这样的：if (...zIndex == -3) { ...zIndex = -2; } 注意if()条件中的==。 - Michael Berkowski

Answer 1

function thumbnail(){
    var depth = document.getElementById("div").style.zIndex;
    document.getElementById("div").style.zIndex = (depth == -3)? -2 : -3;
}

- pbibergal

Answer 2

这个稍微更高效的版本避免了多次遍历DOM：

function thumbnail () {
    var elStyle = document.getElementById ("div").style;
    elStyle.zIndex = elStyle.zIndex == -3 ? -2 : -3;
}

使用

标签作为id可能会在以后重新阅读代码时产生困惑，可以使用一个能够标识该div功能的名称来代替。

- HBP