如何在JavaScript中使用它？

Question

在jQuery中我们使用:

$("p").click(function(){$(this).hide();});

在上面的语句this中非常重要,因为它只隐藏了p我们单击的元素.但是,如果我们"p"在this它的位置使用它将隐藏所有p元素,当我们点击任何一个p元素.

我想知道是否有任何方法可以使用JavaScript生成相同的效果.我试过了:

document.getElementsByTagName("p").onclick = function(){this.style.display:none;}

和

document.getElementsByTagName("p").onclick = function(){document.getElementsByTagName(this).style.display:none;}

但这一切都不起作用.

Answer 1

您需要遍历每个元素,然后使用它addEventListener来附加事件:

var allP = document.getElementsByTagName("p");
for(i=0; i< allP.length; i++) {
    allP[i].addEventListener('click', function () {
      this.style.display = "none";
    });
}

工作演示

Answer 2

正如Alex在评论中写道:

我想知道是否有任何方法可以使用JavaScript生成相同的效果.

不,它只适用于使用黑暗魔法的jQuery.

jQuery是滥用this.实际上它应该只在类中使用,而不是在回调中使用.

要使用本机DOM实现相同的效果:

• 使用document.querySelectorAll()选择的所有<p>要素.
• 使用将结果(NodeList)转换为数组Array.from().
• 调用forEach()方法对所有元素执行函数.
• click使用addEventListener()方法为每个元素分配事件侦听器.
• 最后,事件监听器里,分配'none'给el.style.display隐藏元素.

现场演示

Array.from(document.querySelectorAll("p"))
  .forEach(el => el.addEventListener('click', () => el.style.display = 'none'))

<p>Try clicking any of the paragraphs.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus metus, ullamcorper tempus augue interdum, efficitur vulputate lectus.</p>
<p>Vestibulum ullamcorper ultrices egestas.</p>
<p>Pellentesque volutpat, est ut convallis interdum, elit metus dapibus ex, non consectetur sem est et felis.</p>