查找元素的目标

Finding the target of an element

本文关键字：目标 元素 查找      更新时间：2023-09-26

我一直在寻找答案，但还没有找到完整的解决方案。我不确定我搜索的条件是否好。所以它是：我想瞄准元素并更改它们的文本。现在，我对每个元素使用一个函数，但它非常重复，所以这里有一个例子：

HTML

<p id="p1" onClick="change1()">Hello</p>
<p id="p2" onClick="change2()">My name is Ben</p>
<p id="p3" onClick="change2()">Good Bye</p>

JavaScript

function change1() {
    var test = prompt('Enter new text here');
    document.getElementById('p1').innerHTML = test;
}
function change2() {
    var test = prompt('Enter new text here');
    document.getElementById('p2').innerHTML = test;
}
function change3() {
    var test = prompt('Enter new text here');
    document.getElementById('p3').innerHTML = test;
}

因此，我所做的是允许用户更改"p"元素中的文本。但正如你所看到的，如果我需要在页面上重复一百个元素的函数，事情可能会变得很长。有没有一种方法可以使用event.target或其他方法来查找被单击的"p"元素的"id"，然后将其放入提示框的值中？我只是想要一个通用函数来防止所有这些重复。

额外的好处是不要在每个元素上使用"onclick"（类似于$（'p'）.click…），这将适用于所有p元素。

我更喜欢没有JQuery的JavaScript，但如果它简单得多，我会使用它

非常感谢您抽出时间！

在onclick属性中，this是目标。然后可以将其作为参数传递给函数。

function change(element) {
  var test = prompt('Enter new text here');
  element.innerHTML = test;
}
<p id="p1" onClick="change(this)">Hello</p>
<p id="p2" onClick="change(this)">My name is Ben</p>
<p id="p3" onClick="change(this)">Good Bye</p>

在我看来，如果使用jquery，您将付出更少的努力。看看这个：

$('[id=^p]').on('click', function(obj) {
    var test = prompt('Enter new text here');
    var n = test.length;
    if(n > 0) 
       obj.html(test);
});

如果没有它，您将不得不使用getElementByTag并遍历for。您可以这样做，但是jquery在这里确实节省了一些时间。

有了这个解决方案，您还可以在html中不需要任何代码，从而更好地分离视图层和业务层。

相关文章：