2

同じようにいくつかのページを設定しています。各ページには 10 ～ 15 枚程度の画像があり、クリックすると画像が変化してクリックできなくなります。私が持っているコードは次のとおりです。

function ToggleOnclick(elID)
{
var el = document.getElementById(elID);
var loc = document.getElementsByClassName("wrapper");

if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        el.src = loc.id + "/" + el.name + "Clicked.png";
}
}

画像のhtmlは次のとおりです。

  ....
  <div class="content">
   <div class="wrapper" id="som">
   <div class="img0"><img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img1"><img src="som/beer.png" alt="beer" name="beer" id="beer" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img2"><img src="som/bel.png" alt="bel" name="bel" id="bel" onclick="ToggleOnclick(this.name);" /></div>
   ....

約 20 個の html ファイルを作成する必要があるため、画像のソースの場所をラッパー div の id タグとして追加することにしました。

私は JavaScript の知識がほとんどなく、探しているものを見つけるのに苦労しています。おそらく、ネイティブ スピーカーではなく、私が探しているものを正確に知らないことが原因である可能性もあります。

私のファイルに注意してください：

  1. お客様の仕様により、古いバージョンのブラウザで動作する必要があります
  2. JQuery では修正できません (コメントや回答でそれについて触れないでください。このプロジェクトでは使用できません。議論の対象ではありません。)

tldr;wrapper-div の id-tag に基づいて img src を設定する方法が必要です

4

1 に答える 1

1

getElementsByClassName単一の要素ではないコレクションを与える

ToggleOnclick関数で要素を取得する必要がないように、要素を渡します

function ToggleOnclick(el)
{
//var loc = document.getElementsByClassName("wrapper")[0];//assuming there is only one wrapper
if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        //el.src = loc.id + "/" + el.name + "Clicked.png";
        el.src = el.src.replace(".png", "Clicked.png");
}
}
<img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this);" />
于 2012-08-13T07:55:17.037 に答える