查找元素的目标

Question

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

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，但如果它更简单，我会使用它。

非常感谢您的宝贵时间！

Answer 1

在我看来，如果您使用 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 中编写任何代码，这样可以更好地分离视图层和业务层。

Answer 2

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

查找元素的目标

Finding the target of an element

javascript

jquery

user-controls