Question

我对代码编写非常陌生，所以请原谅我的无知。我有一些简单的代码，我想让一些＆＃34; outerCircle＆＃34;当用户点击页面上的任意位置时，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>

Answer 1

简单。

function onOff(){

$('.outerCircle').toggle()

}

Answer 2

因此，查看您的代码，您可以使用getElementById()更改所有querySelector()，因为您正在为函数getElementById()提供 CSS选择器作为参数，但它正在等待 id选择器，这是一个没有#或.的简单字符串或我们在CSS中使用的任何内容。

或者@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";
    }
}

JQUERY：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评论道：＆＃34;或者更好，将===代替=＆＃34; 应该比双等于快一点，因为这会阻止js引擎执行类型转换。了解更多信息：

StackOverflow: Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?

ECMAScript: The Abstract Equality Comparison Algorithm and The Strict Equals Operator ( === )

onClick（）JavaScript可见性更改

2 个答案: