0

我希望客户端用户能够在文本输入框中插入文本，单击“替换”并相应地替换超链接列表。锚文本将保持不变，但超链接会改变。

我的问题：我只得到第一个要更改的超链接。我有一个带有两个链接的小提琴，你只能看到第一个变化。我想要一个列表，比如说，20 个链接可以一次更改。

jsfiddle.net/TKxuf/

HTML：

<input id="replace" type="text" value="newphrase" />
<input onclick="doReplace()" type="button" value="Replace!" />

<br/>
<p id="list"><a href="google.com/q=keyword">Google Keyword Search</a></p>
<p id="list"><a href="yahoo.com/q=keyword">Yahoo Keyword Search</a></p>

JavaScript：

function doReplace() {
  var s = "keyword";
  var r = document.getElementById('replace').value;

  var oldtext = document.getElementById('list').innerHTML;
  var newtext = oldtext.replace( s, r );

  console.log(s);
  console.log(r);
  console.log(document.getElementById('list'));
  document.getElementById('list').innerHTML = newtext;
}
4

1 回答 1

0

我无法弄清楚为什么您希望 HTML 页面代码中的原始字符串以开头，所以我建议您的方法可能有问题。另请注意，在 HTML 中拥有多个具有相同 Id 的元素是非法的，这主要解释了为什么 getElementById 只返回一项。外部网址也必须以 http:// 开头。

这些天我通常使用 jQuery - 在 jQuery 中，您可以简单地将 id="list" 交换为 class="list" 并使用 $('.list') 来获取它们的列表。$('.list').each(function() { var item = this; /* 这里的操作代码 */ }); 将允许您全部更改，但您可能需要阅读一些内容。

无论如何，我仍然认为您的方法是错误的。

我要做的是有一个普通的 javascript url 数组，带有难以混淆的可替换键作为 url 的一部分，例如

var addresses = [
    { text: "Google Keyword Search", url: "http://google.com?q=%keyword%" },
    { text: "Yahoo Keyword Search", url: "http://yahoo.com?q=%keyword%" }
];

当您的用户搜索时，您然后通过遍历数组将新的 html 代码构建为字符串：

var output = '';
for (var i = 0; i<addresses.length; i++) {
    var item = addresses[i];
    output += '<p><a href="'+escape(item.url.replace('%keyword%', r))+'">'+item.text+'</a></p>';
}

注意：我没有检查过这段代码，但你应该能明白。实际上，您可以通过在列表容器上使用 innerHTML 来写出所有的整个列表。

希望这会有所帮助。

最好的问候， Mark Rabjohn
综合艺术有限公司

于 2013-08-04T15:34:22.767 回答