如何对不同ID的不同元素调用相同的方法？
如何对不同ID的不同元素调用相同的方法？
提问于 2018-05-06 22:37:41
假设我有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。一定有一种更简单的方法。有什么想法吗？
回答 5
Stack Overflow用户
发布于 2018-05-06 22:45:26
如果您需要在多个元素上使用相同的侦听器，我建议您使用class而不是ids
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>
Stack Overflow用户
发布于 2018-05-06 22:41:31
首先，元素不应该具有相同的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>
Stack Overflow用户
发布于 2018-05-06 22:41:57
多个元素不应具有相同的id属性。但是您可以对多个元素使用相同的class。
您可以使用querySelectorAll()获取所有目标p。然后，您可以使用forEach()和addEventListener()将click事件添加到每个p。在函数内部，您可以使用关键字this访问当前单击的元素，如下所示：
var p = document.querySelectorAll(".demo");
p.forEach(function(el){
el.addEventListener('click', myFunction);
})
function myFunction() {
this.innerHTML = "YOU CLICKED ME!";
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50200874
复制相关文章
相似问题
腾讯云开发者
