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');
}

注意：分配点击处理程序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";
}

点击第二次onclick

2 个答案: