javascript - 如何让 div 在 onclick nr 2 之后消失？

Question

我尝试过这个，但显然它不起作用。我对 JS 很陌生，我该怎么做？

 function test() {
                if(document.getElementById('div1').style.display = 'block'){
                    document.getElementById('div1').style.display = 'none';
                }
                if(document.getElementById('div1').style.display = 'none'){
                    document.getElementById('div1').style.display = 'block';
                }
  }

Answer 1

您拥有的代码(一旦更正)将切换可见性，但不会使元素在用户第二次单击它时不可见。

我已经设置了 JSFiddle here它使用纯 JavaScript 来完成您在问题标题中提出的要求。

假设您的 HTML 看起来像这样，其中 DIV 的类名为“tester”:

<div class="tester">This is a triumph.</div>
<p>I'm writing a note here; huge success</p>

实现此目的的一种方法是向 DIV 添加一个数据元素来跟踪点击次数，然后，当点击次数达到两次时，我们将其隐藏。其代码如下所示:

document.getElementsByClassName("tester")[0].onclick = function(targ) {
    if(!targ.target.hasAttribute("data-click")) {
        targ.target.setAttribute("data-click",0);
    }
    var currClicks = +targ.target.getAttribute("data-click");
    if(currClicks==2){
        targ.target.style.display = "none";
    } else {
        targ.target.setAttribute("data-click", currClicks+1);
    }
};

同样，这将为您提供您在问题中询问的功能，但与您的代码示例不匹配，因为它并没有真正实现您想要的功能。如果您需要更多这方面的信息，请随时询问，但我认为这会给您带来您想要的东西。