Question

我仍然是JavaScript新手，对于任何不正确的术语等都感到抱歉。

我有一个使用按钮的图像转换器，并且图像存储在按钮中，但我知道有一种方法可以将这些图像压缩成阵列并使用'image_array（0）'打印出图像，例如从数组中获取图像。

以下代码;

<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button onclick="document.getElementById('image').src='green_light.jpg'">Green</button>
<p></p>
<button onclick="document.getElementById('image').src='yellow_light.jpg'">Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_and_yellow_light.jpg'">Red/Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_light.jpg'">Red</button>
<p></p>
<button onclick="document.getElementById('image').src='blank_light.jpg'">Reset</button>
</body>
</html>

我找了一个类似线程的20分钟，但找不到任何具体的东西，并且对JavaScript和HTML的理解很简单，我发现的一切都太模糊了我正在寻找的东西。

提前致谢。

Answer 1

图像未存储在按钮中，您只是在点击时更改图像源。如果通过压缩意味着图像将具有更少的字节，那么你错了，数组不会这样做。它只是保持信息连续。唯一的好处是你可以处理更多动态的东西，也许更有条理。

var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_ligh", "red_light.jpg", "blank_light.jpg"]

var buttons = document.getElementsByClassName("change-image")

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function () {
    document.getElementById("image").src = imageSources[i]
  }
}

<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button class = "change-image">Green</button>
<p></p>
<button class = "change-image">Amber</button>
<p></p>
<button class = "change-image">Red/Amber</button>
<p></p>
<button class = "change-image">Red</button>
<p></p>
<button class = "change-image">Reset</button>
</body>
</html>

Answer 2

如果我理解正确，你需要通过将图像保存在数组中来改变图像的来源。

[].slice.call(document.querySelectorAll('button'), 0)

以上行是访问button中的所有DOM。

做这样的事情。

＆＃13;

var images = ['green_light.jpg',
              'yellow_light.jpg',
              'red_and_yellow_light.jpg',
              'red_light.jpg',
              'blank_light.jpg'
             ];

var imageElement  = document.getElementById('image');

[].slice.call(document.querySelectorAll('button'), 0).forEach(function(button, index){
  button.addEventListener('click',function(e){
    imageElement.src = images[index];
    console.log("Image changed to: ", images[index]);
  });
});

＆＃13;

<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button>Green</button>
<p></p>
<button>Amber</button>
<p></p>
<button>Red/Amber</button>
<p></p>
<button>Red</button>
<p></p>
<button>Reset</button>
</body>
</html>

＆＃13;

将基于按钮的图像转换器压缩到数组

2 个答案: