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";
    });
}

<强> Working Demo

Answer 2

作为Alex wrote in comments：

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


不，它只适用于使用黑魔法的jQuery。

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

使用原生DOM实现相同的效果：

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

现场演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

第1步：获取所有段落

第2步：将clickListener附加到段落中的每个项目

<html>
<head><title>Test</title></head>

<body>
    <p>This is a paragraph</p>

    <p>This is another paragraph</p>
</body>

<script type="text/javascript">

    function paragraphsClickHandler() {
        this.style.display = "none";
    }

    var paragraphs = document.getElementsByTagName("p");
    var i;

    for(i=0; i<paragraphs.length; i++)
        paragraphs[i].addEventListener("click", paragraphsClickHandler);


</script>
</html>

Answer 4

方法document.getElement**s**ByTagName不存在。

您应该使用document.getElementsByTagName("p")[0].onclick = function(){ this.style.display= "none"; }而不是返回集合：

$("p")

或者将其用于相同的var elems = document.getElementsByTagName("p"); for(var i = 0; i < elems.length; i++){ elems[i].onclick = function(){ this.style.display= "none"; } }示例：

setup.sh

Answer 5

如果您碰巧更喜欢箭头功能或因某些原因无法信任this，您可以改为抓取e.currentTarget：

const elems = document.getElementsByTagName("p");
const handleClick = e => console.log(e.currentTarget); //logs the clicked element

for (let i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', handleClick);
}

Answer 6

document.getElementsByTagName（＆＃34; p＆＃34;）返回一个集合。您需要在每个元素上迭代并挂钩事件：

Array.prototype.slice.call(document.getElementsByTagName("p"))
                     .forEach(function(element) {
                                element.onclick = function() {
                                 element.style.display = 'none';
                                }
                      });

Answer 7

由于您使用的是getElementsByTagName，它将提供一个数组对象，而不是单个元素，因此您需要在循环中迭代它并将click事件与每个元素绑定如下：

var domLength = document.getElementsByName('p').length;
for (var i=0; i<domLength; i++) {
    document.getElementsByName('p')[i].style.display = none;
}

Answer 8

 var bubblingToEle = function (target, type, value) {
        while(target){
            switch (type){
                case 'nodeName':
                    if(target.nodeName === value){
                        return target;
                    }
                    break;
                default :
                    break;
            }
            target = target.parentNode;
            if(target.nodeName === 'HTML'){
                break;
            }
        }
        return null;
    }
    document.body.addEventListener('click', function (e) {
        var target = e.target,
            isPTag = bubblingToEle(target, 'nodeName', 'P');

        if(isPTag){
            isPTag.style.display = 'none';
        }
    })

我认为这样更好，不需要绑定很多听众。

如何在JavaScript中使用它？

8 个答案:

现场演示