javascript - onclick 第二次点击

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">`

你可以做

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

如果这不起作用，则可能与saved.png不在 html 所在路径中的事实有关。因此请尝试使用完整的 URL：

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

注意：最好不显眼地分配点击处理程序（另请参阅这个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";
}