如果单击，将 href 文本添加到 link

Question

我有一个包含多个 link 的页面。一些 link 指向完全相同的 URL。当这些重复的 link 之一被单击时，我想将文本（linkable href 文本）添加到被单击（或悬停？）的 link。

到目前为止，我似乎只能添加第一个 link 的文本，但不能添加我单击的文本。

我已经尝试了一些东西，但我仍在学习 JavaScript（我羡慕你们所有人）而且我担心我越努力就会把事情搞砸。我知道我可能不得不使用悬停或以某种方式更改 getElementsByTagName("a")[0]... 任何帮助将不胜感激！

<p>
<a href="http://www.1.com" target="_blank">dog</a>
<a href="http://www.2.com" target="_blank">cat</a>
<a href="http://www.3.com" target="_blank">bird</a>
<a href="http://www.3.com" target="_blank">frog</a>
</p>

Javascript:

$var anchors = document.querySelectorAll('a[href$="http://www.3.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = document.getElementsByTagName("a")[0].innerHTML;
});

例子当我点击 link "dog" 时，我想打开一个新的浏览器 tab/window，URL 为“http://www.1.com”

当我点击 link "cat" 时，我想打开一个新的浏览器 tab/window，URL 为“http://www.2.com”

当我点击 link "bird" 时，我想用 "bird"

的 URL 打开一个新的浏览器 tab/window ]

当我点击 link "frog" 时，我想用 "frog"

的 URL 打开一个新的浏览器 tab/window ]

因此，任何具有“http://www.3.com" as the href will ignore the "http://www.3.com”的 link 而是使用刚刚单击的文本打开一个新浏览器 tab/window。

此外，我无法向 links/HTML 添加 ID、Class、脚本等，因此我必须弄清楚如何将所有这些作为 JS 引用 href 而不是HTML 里面。

Answer 1

这样试试：

<a href="" onClick="javascript:this.innerHTML = 'ChangedClickMe'">ClickMe</a>

JSFIDDLE DEMO

Answer 2

不确定这是否正是您所要求的，但 THIS DEMO 是我获取 href 并将其附加到文本的示例。

html

<a href='#' onclick='change(this)'>link one</a>
<a href='#' onclick='change(this)'>link two</a>
<a href='#' onclick='change(this)'>link three</a>
<a href='#' onclick='change(this)'>link four</a>

css

a {
    float: left;
    clear: both;
}

javascript

function change(variable) {
    variable.innerHTML = variable.innerHTML + variable.href;
}

Answer 3

我的一位同事找到了解决方案。谢谢大家的帮助。

选项 1：

替换我原来的部分JS：

"document.getElementsByTagName("a")[0].innerHTML"

与：

"window.location"

或者

选项 2： jsfiddle

替换我原来的所有JS：

$var anchors = document.querySelectorAll('a[href$="http://www.3.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = document.getElementsByTagName("a")[0].innerHTML;
});

有：

var anchors = $('a[href$="http://www.3.com"]');
$.each(anchors, function (index, element) {
$(element).attr('href',$(element).text());
});

如果单击，将 href 文本添加到 link

Add href text to link if clicked

html

javascript

jquery

href

hyperlink