Question

我是HTML / CSS / JS等新手，我只是创建一个小原型页面作为业余爱好。

我一直试图重用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，或者为它们提供一个共同的类。

我在这里给每个人一个唯一的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/

Answer 2

在HTML ID中，应该在页面上是唯一的，所以我猜测如果有多个，它只会选择具有匹配ID的第一个元素。如果您想重复使用它，则可以使用class="nodownload"代替id="nodownload"。

Answer 3

不要对两个不同的元素使用相同的ID

Answer 4

实际上，您根本不需要使用id来使代码工作。您可以传递对处理程序中单击的元素的引用。例如：

<script type="text/javascript">
    function handleClick(target) {
        console.log(target); // for debugging
        target.innerHTML='clicked';
    }
</script>

<a href="#" onclick="handleClick(this)">click me</a>

编辑：事实证明，我将锚点连接到一个函数已经很久了，所以我没有把它弄得很正确。我现在修好了。

区分点击的链接？

4 个答案: