javascript - 区分点击的链接？

Question

我对 HTML/CSS/JS 等非常陌生，只是作为一种爱好创建一个小原型(prototype)页面。

我在尝试重用 javascipt 的特定位时遇到了困难，如下所示:

<script type="text/javascript">
function noDownload()
{
document.getElementById("nodownload").innerHTML="Download unavailable.";
}
</script>

然后在页面下方我将看到以下内容:

<h3>r9 (Mar 23, 2013) <a id="nodownload" onClick="noDownload()"><img id="nodownload" height="19" width="19" src="[imagerurl]"></a></h3>

然后它会再显示几次...

<h3>r7 (Jan 11, 2013) <a id="nodownload" onClick="noDownload()"><img id="nodownload" height="19" width="19" src="[imageurl]"></a></h3>

如果我点击 r9 图像，我会得到我想要的结果 - 该图像被文本“下载不可用”替换。

但是，如果我单击 r7 图像，则文本将替换 r9 图像，而不是 r7 图像。

有什么解决办法吗？

Answer 1

ID 应该始终是唯一的 - 使用唯一的 ID 来代替或为它们提供一个公共(public)类。

在这里，我为他们每个人提供了一个唯一的 ID:

<h3>r1 (Jan 7, 2013) <a id="noDownloadOne" onClick="noDownload('aOne')"><img height="19" width="19" src="http://i.imgur.com/In5SIVc.png">a</a></h3>
<h3>r2 (Jan 7, 2013) <a id="noDownloadTwo" onClick="noDownload('aTwo')"><img height="19" width="19" src="http://i.imgur.com/In5SIVc.png">a</a></h3>

然后根据选择的内容，相应地更改innerHTML:

<script type="text/javascript">
function noDownload(e) {
    if(e == 'aOne') {
      document.getElementById("noDownloadOne").innerHTML="Download unavailable One.";
        alert('aOne was chosen');
    }
    else if(e == 'aTwo') {
      document.getElementById("noDownloadTwo").innerHTML="Download unavailable Two.";
        alert('aTwo was chosen');
    }
    else {
        alert('Neither aOne nor aTwo was chosen');
    }
}
</script>

这是一个工作的 jsFiddle - http://jsfiddle.net/Ezauy/2/