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画像をクリックすると、r7画像ではなく、テキストに置き換えられるのはr9画像です。

解決策はありますか？

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

HTMLでは、IDはページ上で一意であると想定されているため、複数ある場合は、一致するIDを持つ最初の要素のみが選択されると思います。再利用したい場合は、代わりにを使用できclass="nodownload"ますid="nodownload"。

于 2013-03-24T18:37:32.253 に答える
0

2つの異なる要素に同じ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 に答える