0

我对 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 图像。

有什么解决办法吗？

4

4 回答 4

3

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/

于 2013-03-24T18:35:48.107 回答
0

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

于 2013-03-24T18:38:44.440 回答
0

事实上，你根本不需要使用 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>

编辑：事实证明，自从我以这种方式将锚点连接到一个函数已经很久了，我并没有完全正确。我现在已经修好了。

于 2013-03-24T18:58:35.840 回答
0

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

于 2013-03-24T18:37:32.253 回答