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功能的孩子。然后 - 迭代它并绑定监听器。

＆＃13;

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

＆＃13;

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

＆＃13;

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'

}

Javascript相当于jQuery onclick

3 个答案: