如何在同一個元素上進行多次點擊事件？

Question

如何在 JavaScript 中的同一元素上使用多個點擊事件？

我嘗試這樣做，當我單擊 h3 元素時，它會打開它的描述，然后我再次單擊它關閉描述的元素。

 var p, img, question; function clickOn(){ img = document.getElementsByClassName('down-arrow')[0]; p = document.querySelectorAll('p')[0]; p.setAttribute('class','show-text'); /*img.setAttribute('class','show');*/ } function clickOff(){ img = document.getElementsByClassName('down-arrow')[0]; p = document.querySelectorAll('p')[0]; p.removeAttribute('class','show-text'); /*img.removeAttribute('class','show');*/ } question = document.getElementsByClassName('question')[0]; question.addEventListener('click', clickOn, false); question.addEventListener('click', clickOff, false);

Answer 1

嘗試使用切換來添加和刪除 class https://www.w3schools.com/howto/howto_js_toggle_class.asp ：

var p, img,  question;

function clickOn(){
    img = document.getElementsByClassName('down-arrow')[0];
    p = document.querySelectorAll('p')[0];
    p.classList.toggle('show-text');
}

question = document.getElementsByClassName('question')[0];

question.addEventListener('click', clickOn, false);

Answer 2

你可以聲明一個全局變量

var isTextDisplayed = false;

然后您可以調用相同的事件偵聽器並根據位打開或關閉描述。 例如

document.getElementById("myBtn").addEventListener("click", function() {
  if(!isTextDisplayed) {
    //HIDE DESCRIPTION CODE
  }
  else {
    //SHOW DESCRIPTION CODE
  }
  isTextDisplayed = !isTextDisplayed;
});

完整代碼：

 var isTextDisplayed = false; var description = document.getElementById("description"); document.getElementById("myBtn").addEventListener("click", function() { if(.isTextDisplayed) { description.style;display = 'none'. } else { description.style;display = 'block'; } isTextDisplayed =;isTextDisplayed; });

 <h3 id="myBtn">CLICK TO TOGGLE DESCRIPTION</h3> <p id="description"> Some dummy text for description goes here in the block </p>

有關演示，請參閱JSFIDDLE 代碼