使用按钮交换图像Javascript html

Question

我是Javascript的新手，我正试图通过将许多函数集成到一个函数中来简化我的生活。

我有一个非常简单的操作，可以点击一个按钮来加载一个特定的图像来代替默认图像。与拥有多个功能来做同样的事情相反，我宁愿只有一个。

我想你可以把图像存储在一个数组中，然后按位置选择它们吗？

这是我迄今为止所拥有的。

function swap1() {
  document.getElementById("default").src="321.jpg";
}
function swap2() {
  document.getElementById("default").src="432.jpg";
}
function swap3() {
  document.getElementById("default").src="742.jpg";
}

 

<input type="button" onClick="swap1()">
<input type="button" onClick="swap2()">
<input type="button" onClick="swap3()">

Answer 1

使用函数参数：

function swap(imgNumber)
{
document.getElementById("default").src=imgNumber+".jpg";
}

以及更高版本：

<input type="button" onclick="swap('321')">
<input type="button" onclick="swap('432')">
<input type="button" onclick="swap('742')">

回答评论（不是最好的js代码，但显示变量的想法）：

var clip=false;
function setClip(val) {
   clip=val;
}
function swap(imgNumber)
{
   if(clip==true)
     document.getElementById("default").src=imgNumber+"clip.jpg";
  else
     document.getElementById("default").src=imgNumber+".jpg";
 }

<input type="button" onclick="swap('321')">
<input type="button" onclick="swap('432')">
<input type="button" onclick="swap('742')">
<input type="button" onclick="setClip(true)">

只需添加采用true/false的变量-最后一个按钮将clip变量设置为true-我们更改了交换函数以检查clip是否为true-如果是-它加载不同的文件

Answer 2

你可以做这个

JS

function swap(string img)
{
    document.getElementById("default").src=img;
}

HTML

<input type ="button" onClick="swap('321.jpg')">
<input type ="button" onClick="swap('432.jpg')">
<input type ="button" onClick="swap('742.jpg')">