onClick(）JavaScript可见性更改

onClick() JavaScript visibility change

本文关键字：可见性 JavaScript onClick      更新时间：2024-03-04

我对代码编写非常陌生，所以请原谅我的无知。我有一段简单的代码，当用户点击页面上的任何位置时，我想关闭几个"outerCircle"div的可见性。我试过几种方法，但都不起作用。如果有人有什么建议，我将不胜感激。以下是我迄今为止的建议：

<body onload = "startBlink()" onclick = "onOff()">
<p id = "title">Click anywhere to turn the outer circles on or off.</p>
<div class = "container" onclick = "onOff()">
    <div class = "outerCircle" id = "outerLeftCircle">
        <div class = "innerCircle" id = "innerLeftCircle">
        </div>
    </div>
    <div class = "outerCircle" id = "outerRightCircle">
        <div class = "innerCircle" id = "innerRightCircle">
        </div>
    </div>  
</div><!-- Closes the container div -->

<script>
    // This function blinks the innerCircle div //
    function startBlink(){
        var colors = ["white","black"];
        var i = 0;   
            setInterval(function() {
                $(".innerCircle").css("background-color", colors[i]);
                i = (i+1)%colors.length;
            }, 400);
    }
    // This function turns the outerCircle divs on or off //
    function onOff() {
        alert("Entering function now");
        if (getElementById(".outerCircle").style.visibility = "visible") {
            getElementById(".outerCircle").style.visibility = "hidden";
            getElementById(".outerLeftCircle").style.visibility = "hidden";
            getElementById(".outerRightCircle").style.visibility = "hidden";
        } else {
            getElementById(".outerCircle").style.visibility = "visible";
            getElementById(".outerLeftCircle").style.visibility = "visible";
            getElementById(".outerRightCircle").style.visibility = "visible";
        }
    }
</script>

simple。

function onOff(){
$('.outerCircle').toggle()
}

因此，查看您的代码，您可以修复用querySelector()更改所有getElementById()的问题，因为您为函数getElementById()提供了一个CSS选择器作为参数，但它正在等待一个id选择器

或者，正如@puelo所指出的，你可以使用jQuery而不是原生javascript，它已经加载了，所以为什么不呢，你可以将$()与CSS选择器一起使用：

NATIVE Javascript：jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if (!document.querySelector("#outerLeftCircle").style.visibility || document.querySelector("#outerLeftCircle").style.visibility == "visible") {
      document.querySelector("#outerLeftCircle").style.visibility = "hidden";
      document.querySelector("#outerRightCircle").style.visibility = "hidden";
    } else {
      document.querySelector("#outerLeftCircle").style.visibility = "visible";
      document.querySelector("#outerRightCircle").style.visibility = "visible";
    }
}

查询：jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if ($("#outerLeftCircle").css("visibility") === "visible") {
        $("#outerLeftCircle")[0].style.visibility = "hidden";
        $("#outerRightCircle")[0].style.visibility = "hidden";
    } else {
        $("#outerLeftCircle")[0].style.visibility = "visible";
        $("#outerRightCircle")[0].style.visibility = "visible";
    }
}

JQUERY。。。另一种方式：jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if ($("#outerLeftCircle").css("visibility") === "visible") {
        $(".outerCircle").css("visibility","hidden");
    } else {
        $(".outerCircle").css("visibility","visible");
    }
}

另一件事是你的if错了，把==放在= 的后面

编辑：正如@KjellIvar评论的那样："或者更好的做法是，将===而不是="应该比双倍相等快一点，因为这会阻止js引擎执行类型转换。更多信息：

StackOverflow：我在JavaScript比较中使用哪个等于运算符（==vs===）重要吗？

ECMAScript:抽象等式比较算法和严格Equals算子（==）

相关文章：