Скрыть элемент, когда вы нажимаете на него с помощью addEventListener - PullRequest
Новая
       27

Скрыть элемент, когда вы нажимаете на него с помощью addEventListener

0 голосов
/ 24 октября 2018

Я хочу скрыть элементы веб-HTML, когда вы нажимаете на них, используя 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>

Я использую window.setTimeoutпосле вызова myFunction, потому что элемент должен появиться снова через 2 секунды.

Я ищу способ узнать, какой элемент был нажат и передать его в качестве аргумента для скрытия, я попытался с помощью «this», но я могу »заставить его работать.

Ответы [ 3 ]

0 голосов
/ 24 октября 2018

С jquery это может быть гладче ... вам просто нужно сделать 

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

, вы также можете изменить demo1 и demo2 на demo.

Надеюсь, мой ответ поможет!

0 голосов
/ 24 октября 2018

Используя ваш код, я отредактировал несколько битов, чтобы он работал на вас. 

<!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 имеет объект события, связанный с функцией, которую он вызывает.Вы можете передать его в свою функцию и извлечь цель, на которую вы нажали, и обработать все остальное.Надеюсь, это поможет:)

0 голосов
/ 24 октября 2018

Элементом будет значение 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.

...