Question

假设我有3个p元素。如果我点击其中一个，它的文本应该改变。但是，如果不为每个元素编写方法，我怎么能这样做？

options(width = 75)
c(1:30) 

[1]  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
[24] 24 25 26 27 28 29 30

在这个例子中，如果我点击它的第一个工作。但不是第二个。我不想一遍又一遍地编写相同的方法，只是改变ID。必须有一个更简单的方法。有什么想法吗？

Answer 1

如果你需要在multiple元素上使用相同的监听器，我建议使用class而不是id

Select x.name,x.continent 
from world x  
Where x.population > ALL(
   Select y.population*3
   From world y
   Where x.continent=y.continent and x.name!=y.name
)

var p = document.querySelectorAll(".selector");
p.forEach(function(el) {
  el.addEventListener('click', myEventHandler);
})

function myEventHandler(event) {
    event.target.innerHTML = "YOU CLICKED ME!";
}

Answer 2

首先，元素不应具有相同的ID。

其次，让你的函数接受事件的参数。这将让你得到你点击的东西。

第三，您只想设置一些文字，以便为innerHTML切换textContent。

＆＃13;

<p id="demo">Click me.</p>
<p id="demo2">Click me.</p>

<script>
    document.getElementById("demo").onclick = myFunction;
    document.getElementById("demo2").onclick = myFunction;

    function myFunction(e) {
        e.target.textContent = "YOU CLICKED ME!";
    }
</script>

＆＃13;

Answer 3

多个元素不应具有相同的id属性。但是对于多个元素，您可以使用相同的class。

您可以使用querySelectorAll()获取所有定位p。然后，您可以使用click和p将forEach()事件添加到每个addEventListener()。在函数内部，您可以使用关键字this访问当前单击的元素，如下所示：

＆＃13;

var p = document.querySelectorAll(".demo");
p.forEach(function(el){
  el.addEventListener('click', myFunction);
})

function myFunction() {
    this.innerHTML = "YOU CLICKED ME!";
}

＆＃13;

<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>

<p id="demo1" class="demo">Click me.</p>
<p id="demo2" class="demo">Click me.</p>

＆＃13;

Answer 4

在所有这些类中添加一个类，并使用document.querySelectorAll(".p");为所有这些类添加事件侦听器

var o = document.querySelectorAll(".p");

for(var i=0; i<o.length; i++){

    o[i].addEventListener("click", function(e){
      e.target.innerHTML = "You clicked ME"
    
    })
}

<!DOCTYPE html>
<html>
<body>

<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>

<p id="demo" class="p">Click me.</p>
<p id="demo2" class="p">Click me.</p>

 

</body>
</html>

Answer 5

通过Event.target获取元素并将其传递给您的函数：

<script>
    document.getElementById("demo").onclick = function(event) {
        myFunction(event.target)
    };

    function myFunction(element) {
        element.innerHTML = "YOU CLICKED ME!";
    }
</script>

如何为具有不同ID的不同元素调用相同的方法？

5 个答案: