Question

以下是我体验过的一个小小的演示：

以下是代码片段：

HTML：

<div id="frame">
<div class="bead col_a" id="a1"></div>
</div>

CSS：

#frame {
position: relative;
height: 205px;
}

.bead {
position: absolute;
background: black;
width: 50px;
height: 25px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.bead:hover {
background-color: white;
border: 1px solid black;
}

#a1 {
top: 0px;
}

JS：

var a1 = document.getElementById("a1");

function fiveToggle(bead1) {
    if (bead1.style.top === "0px"){
    bead1.style.top = "25px";
    } else {
    bead1.style.top = "0px";
    }
}

a1.addEventListener("click", function(){ fiveToggle(a1); }, false);

想法是在点击时使珠子的位置向上或向下移动。换句话说，要切换。但是在实现此功能的函数中添加if / else语句会使可点击项在移动之前需要两次单击。在初始额外点击之后，珠子根据需要一次移动。如果我从重新定位珠子的函数中删除if / else语句并添加简单移动它的代码（没有条件检查），那么它可以根据需要工作。我觉得这很好奇。有人会向我解释为什么这样做会这样吗？

Answer 1

addEventListener没有问题，你必须添加一个条件|| bead1.style.top == ""，因为默认情况下bead1.style.top为空：

function fiveToggle(bead1) {
    if (bead1.style.top == "0px" || bead1.style.top == ""){
        bead1.style.top = "25px";
    } else {
        bead1.style.top = "0px";
    }
}

您也可以使用css，将初始顶值设置为0px

JavaScript addEventListener需要2次单击才能触发函数

1 个答案: