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是否为真 - 如果是 - 它加载不同文件

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')">

使用按钮交换图像Javascript html

2 个答案: