區分點擊的鏈接？

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應該是唯一的，因此我猜測如果有多個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>

編輯：事實證明，自從我以這種方式將錨連接到函數以來已經很久了，以至於我沒有完全正確。 我已經修復了。