相當於jQuery onclick的Javascript

Question

我應該如何構造我的代碼以獲得此jQuery的效果

var divQuery = $('.html5gallery-thumbs-0').children();
    divQuery.on('click', function () {...}

我以為是這樣的：

 var divQuery = document.getELementsByClassName('html5gallery-thumbs-0');
        divQuery.onclick = function (elem) {
//this.style.display = 'none'
// OR
//elem.style.display = 'none'

}

元素應該引用clicket對象嗎？ 或者，它應該是關鍵單詞this 。 我想學習javascript因為jQuery畢竟只是庫。 先感謝您！

Answer 1

正好趕上家長與querySelector ，並把它的孩子children的功能。 然后-對其進行迭代並綁定偵聽器。

 const divQuery = document.querySelector('.a'); Array.from(divQuery.children).forEach(v => { return v.addEventListener('click', function() { console.log(this.textContent); }) }) 

 <div class="a"> <div>child1</div> <div>child2</div> </div> 

Answer 2

擴展友善用戶的回答還有另外兩種方法：

使用最新和最強大的JS功能：

const divQuery = document.querySelector('.a');
divQuery.childNodes.forEach(v => {
  v.addEventListener('click', function() {
    console.log(this.textContent);
   })
 });

還有一個非常古老的版本（它支持IE和其他較舊的瀏覽器）：

const divQuery = document.getElementsByClassName('a')[0];
  [].forEach.call(divQuery.children, function(v){
     v.addEventListener('click', function() {
     console.log(this.textContent);
  })
})

Answer 3

你在做什么幾乎是正確的。 但是，當您按類查找元素時，它將為您提供對象的集合。 因此，首先選擇索引，然后分配onclick函數。 像下面。

var divQuery = document.getELementsByClassName('html5gallery-thumbs-0');
        divQuery[0].onclick = function (elem) {
//this.style.display = 'none'
// OR
//elem.style.display = 'none'

}