Question

我想在HTML Web元素上单击时使用元素上的addEventListener来隐藏它们。

我有此代码：

$<!DOCTYPE html>
<html>
<body>    
<h2 id='demo'>ELEMENT 1()</h2>    
  <button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>
   <p id="demo2">ELEMENT 3</p>

<script>
document.getElementById("demo").addEventListener("click", hide);
document.getElementById("demo1").addEventListener("click", hide);
document.getElementById("demo2").addEventListener("click", hide);   

function hide(){
    myFunction();
    timeoutID= window.setTimeout(myFunction,2000);
}
function myFunction() {
    var x = document.getElementById("demo"); /*x should be the element that I clicked, how I could do it?*/
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }    
}    
</script>    
</body>
</html>

我在调用myFunction之后使用window.setTimeout，因为元素应该在2秒后再次出现。

我正在寻找一种方法来获取按下的元素并将其作为隐藏参数传递，我尝试使用“ this”，但无法使其正常工作。

Answer 1

该元素将是侦听器函数中的this值。因此，请向myFunction()添加一个参数以使该元素起作用。

document.getElementById("demo").addEventListener("click", hide);
document.getElementById("demo1").addEventListener("click", hide);
document.getElementById("demo2").addEventListener("click", hide);

function hide() {
  myFunction(this);
  timeoutID = window.setTimeout(() => myFunction(this), 2000);
}

function myFunction(x) {
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

<h2 id='demo'>ELEMENT 1()</h2>
<button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>

<p id="demo2">ELEMENT 3</p>

请注意，我在setTimeout()调用中使用了箭头功能，以便保留this。

Answer 2

使用您的代码，我对代码进行了一些修改，以使其适合您。

<!DOCTYPE html>
<html>

<body>

  <h2 id='demo'>ELEMENT 1()</h2>


  <button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>

  <p id="demo2">ELEMENT 3</p>

  <script>
    document.getElementById("demo").addEventListener("click", hide);
    document.getElementById("demo1").addEventListener("click", hide);
    document.getElementById("demo2").addEventListener("click", hide);



    function hide(event) {// revealed passed event argument, part of addEventListener
      var x = event.target; //Passed clicked element to variable
      toggleVis(x);
      setTimeout(function() {
        toggleVis(x);// Inserted into annon function to pass x for reveal after
      }, 2000);
    }

    function toggleVis(target) {
      if (target.style.display === "none") {
        target.style.display = "block";
      } else {
        target.style.display = "none";
      }
    }
  </script>

</body>

</html>

评论应该不错，随时问。

TLDR：addEventListener具有一个与其触发的函数关联的事件对象。您可以将其传递给函数并提取单击的目标，然后处理其余的目标。希望对您有所帮助：）

Answer 3

使用jquery可以更流畅... 您只需要做

$("#demo").click(function(){
   $(this).hide()
   let that = $(this)
   setTimeout(function(){
      that.show()
   }, 2000)
})

您也可以将demo1和demo2更改为demo。

希望我的回答有帮助！

使用addEventListener单击元素时隐藏元素

3 个答案: