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;
}

所以我正在做的是允许用户更改＆＃34; p＆＃34;元件。但正如您所看到的，如果我需要在页面上重复一百个元素的功能，事情会变得冗长。有没有办法使用event.target或其他东西来找到＆＃34; id＆＃34; ＆＃34; p＆＃34;单击的元素然后放入提示框的值？我只是喜欢一个可以阻止所有这些重复的通用函数。

奖金是不使用＆＃34; onclick＆＃34;在每个元素（类似$（＆＃39; p＆＃39;）。点击...），适用于所有p元素。

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

非常感谢你的时间！

Answer 1

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

＆＃13;

function change(element) {
  var test = prompt('Enter new text here');
  element.innerHTML = test;
}

＆＃13;

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

＆＃13;

Answer 2

在我看来，如果你使用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中不需要代码，从而可以更好地分离视图和业务层。

找到元素的目标

2 个答案: