如何在JavaScript中使用它？_Javascript_Jquery_Html_Dom_Javascript Events

如何在JavaScript中使用它？

javascript jquery html dom

如何在JavaScript中使用它？,javascript,jquery,html,dom,javascript-events,Javascript,Jquery,Html,Dom,Javascript Events,在jQuery中，我们使用： $("p").click(function(){$(this).hide();}); 在上面的语句中，这个非常重要，因为它只隐藏了我们单击的p元素。但是，如果我们在这个的位置使用“p”，当我们单击p元素中的任何一个时，它将隐藏所有p元素我想知道是否有任何方法可以使用JavaScript生成相同的效果。我试过： document.getElementsByTagName("p").onclick = function(){this.style.display:no

在jQuery中，我们使用：

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

在上面的语句中，

这个

非常重要，因为它只隐藏了我们单击的

元素。但是，如果我们在

这个

的位置使用

“p”

，当我们单击

元素中的任何一个时，它将隐藏所有

元素

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

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

及

但是这些都不起作用。

您需要迭代每个元素，然后使用

addEventListener

将事件附加到它：

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

var allP=document.getElementsByTagName（“p”）；
对于（i=0；i


文档。getElementsByTagName（“p”）返回一个集合。您需要迭代并钩住每个元素上的事件，如下所示：
Array.prototype.slice.call(document.getElementsByTagName("p"))
                     .forEach(function(element) {
                                element.onclick = function() {
                                 element.style.display = 'none';
                                }
                      });

方法document.getElementByTagName
不存在
您应该改用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";
    }
}

var elems=document.getElementsByTagName（“p”）；
对于（变量i=0；i
由于您使用的是getElementsByTagName，它将提供一个数组对象，而不是单个元素，因此您需要在循环中迭代它，并将click事件与每个元素绑定，如下所示：
var domLength = document.getElementsByName('p').length;
for (var i=0; i<domLength; i++) {
    document.getElementsByName('p')[i].style.display = none;
}

var domLength=document.getElementsByName（'p'）.length；
对于（var i=0；i
我认为这样更好，不需要约束很多听众。
步骤1:获取所有段落
<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>

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


试验
这是一段
这是另一段
函数段落Clickhandler（）{
this.style.display=“无”；
}
var段落=document.getElementsByTagName（“p”）；
var i；
对于（i=0；iAs:
我想知道是否有任何方法可以使用JavaScript生成相同的效果
不，它只适用于jQuery，它使用了黑暗魔法
jQuery误用了这个。事实上，它应该只在类中使用，而不是在回调中使用
要使用本机DOM实现相同的效果，请执行以下操作：

用于选择所有
元素
使用将结果（）转换为数组
调用该方法在所有元素上执行函数
使用方法将单击事件侦听器分配给每个元素

最后，在事件侦听器中，将'none'
分配给el.style.display
以隐藏元素

现场演示

Array.from（document.querySelectorAll（“p”））
.forEach（el=>el.addEventListener（'click'，（）=>el.style.display='none'））
尝试单击任何段落
知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德
ullamcorper ultrices Egesta前庭
Pellentesque Volatip、est ut convallis interdum、elit metus dapibus ex、non-Concertetur sem est et felis.
如果您碰巧喜欢箭头函数或出于某种原因无法信任此
，您可以选择：
const elems=document.getElementsByTagName（“p”）；
const handleClick=e=>console.log（e.currentTarget）；//记录单击的元素
for（设i=0；i
你能试试这个吗。style.display='none'；在点击事件中“我想知道他们有没有办法用javascript产生同样的效果”-不，它只适用于使用暗魔法的jQuery。相关，但可能不是傻瓜：我想避免使用jQuery。但我认为使用javascript获得相同效果并不容易。所以我认为我应该使用jQuery，而不是编写复杂的javascript。@Bergi我认为讽刺是显而易见的，或者使用事件委托：）@Alex:除非动态加载dom，否则不建议加载：）@Milind Anantwar:不建议加载-为什么这样认为？@degr:当元素可以有自己的事件时，在父元素上加载是没有意义的。抱歉，我错过了这篇评论。这只会将事件侦听器附加到DOMSure中找到的第一个
。该示例用于演示问题中提出的此关键字，但问题中的示例将处理程序应用于所有
，并且仅隐藏单击的一个，您的示例不会产生相同的效果。虽然此代码片段可以解决问题，但确实有助于提高您文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满您的代码，因为这会降低代码和解释的可读性！什么是btnSubmit？无论如何，这是一个错误的决定，因为您在每个循环迭代中都执行dom搜索。@degr，我只是忘了用P替换btnSubmit，现在更正了，事件处理程序可以很容易地被视为dom元素的一种方法，尤其是通过.onclick=
附加时。在它里面使用this
会很有意义。@Bergi是的，但无论如何，当使用箭头函数时，this
不会引用当前元素。当然它不会。所以不要抱怨这些：-）顺便说一句，一个“方法”可以重用，不像箭头函数闭包，它需要在每次循环迭代中重新创建。-1“事实上，它应该只在类中使用，而不是在回调中使用”。这一论断非常固执己见，而且非常不一致。JavaScript在ES6之前甚至没有类，而在函数上绑定this
的能力一直存在于call
和apply中。
<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>

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