如何针对具有不同ID的不同元素调用相同的方法？
可以说我有3个p元素。 如果我点击其中一个文本应该改变。 但是我怎么能不用为每个元素编写一个方法？
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
<p id="demo2">Click me.</p>
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
在这个例子中，如果我点击第一个它的作品。 但不是第二个。 我不想一遍又一遍地写同样的方法，只是改变Ids。 必须有一个更简单的方法。 有任何想法吗？
如果你需要多元素的同一个监听器，我会建议使用class而不是id
var p = document.querySelectorAll(".selector");
p.forEach(function(el) {
el.addEventListener('click', myEventHandler);
})
function myEventHandler(event) {
event.target.innerHTML = "YOU CLICKED ME!";
}<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p class="selector">Click me.</p>
<p class="selector">Click me.</p>首先，元素不应该有相同的ID。
其次，让你的功能接受事件的参数。 这会让你得到你点击的东西。
第三，你只是想设置一些文本，以便为textContent切换出innerHTML 。
<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> 在所有这些类中添加一个类并使用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>上一篇: How To call the same Method for different Elements with different IDs?