javascript - 通过 html 图像更改 javascript 变量

Question

我有以下 html 代码:

<div align="center">
  <img src="blue.png"/>     
  <img src="cyan.png"/>
  <img src="green.png"/>
  <img src="purple.png"/>
  <img src="red.png"/>
  <img src="yellow.png"/>
<div\>

我需要根据点击的变量来更改 JavaScript 变量。

如果单击红色，我需要var color等于“红色”，如果单击蓝色，则等于“蓝色”，等等...有什么简单的方法可以做到这一点吗？

Answer 1

假设每个图像的 src 都是一种颜色，只有一个扩展名，您可以这样做。

var images = document.getElementsByTagName('img');

for(var i = 0; i < images.length; i++) {
    images[i].onclick = onImageClick;
}

function onImageClick(e) {
    var image = e.event.target || window.event.target;

    var color = image.src.split('.')[0];

    alert(color);
}

这不是很动态，因此您应该使用这样的数据属性。

<img src="blue.png" data-color="blue" />

并且 onImageClick() 看起来像这样。

function onImageClick(e) {
    var image = e.event.target || window.event.target;

    var color = image.getAttribute('data-color');

    alert(color);
}