onclick 2度目のクリック

Question

これが可能かどうかわかりませんが、コードをシンプルにしていますが、イメージを作成しようとしています。クリックすると新しいイメージに移動します。そのイメージをクリックすると元のイメージに戻ります。 私のコードは次のとおりです。

function save_data() 
{ 
if (document.images.save.src == "saved.png") document.images.save.src="save.png"; 
if (document.images.save.src == "save.png") document.images.save.src="saved.png"; 
} 


<img id="save" onclick="save_data()" src="save.png"> 

Answer 1

簡略化することができます。

<img id="save" onclick="save_data(this)" src="save.png">` 

を使用して

あなたはこれが機能しない場合、それはsaved.pngがHTMLをしているパスにないという事実としなければならないかもしれ

function save_data(img) 
{ 
    img.src = /saved/i.test(img.src) ? 'save.png' : 'saved.png'; 
} 

を行うことができます。だから、完全なURLで試してみてください：

function save_data(img) 
{ 
    var imgpath = 'http://yoursite.com/imgpath/'; 
    img.src = imgpath + (/saved/i.test(img.src) ? 'save.png' : 'saved.png'); 
} 

注：クリックハンドラを割り当てる方が良い場合がありますunobtrusively（これもSO questionを参照してください）

Answer 2

if (document.images.save.src == "saved.png")から.srcはイメージだけではなく、ファイル名のフルパスを返しますので、これは、動作しません。たとえば、http://site.com/path/images/saved.pngです。

代わりに部分文字列を照合してみてください。

function save_data() 
{ 
if (document.images.save.src.indexOf("saved.png") != -1) document.images.save.src="save.png"; 
if (document.images.save.src.indexOf("save.png") != -1) document.images.save.src="saved.png"; 
}