通过 HTML 图像更改 JavaScript 变量

change javascript variables through html images

本文关键字：JavaScript 变量 HTML 图像 通过      更新时间：2023-09-26

我有以下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等于"红色"，如果单击蓝色，则等于"蓝色"，等等......有没有简单的方法可以做到这一点？

假设每个图像的 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);
}

您可以使用图像标签保留颜色属性

<img src='my_image' my_color='blue' class='' onclick='myFunc(this)'>

然后你可以通过附加一个onclick函数（）在JS中访问它：

function myFunc(obj)
{
    var color = obj.getAttribute('my_color');
}

希望有帮助。

with jQuery

<div align="center">
  <img src="blue.png"   data-color="blue"   />     
  <img src="cyan.png"   data-color="cyan"   />
  <img src="green.png"  data-color="green"  />
  <img src="purple.png" data-color="purple" />
  <img src="red.png"    data-color="red"    />
  <img src="yellow.png" data-color="yellow" />
</div>
<script>
    $('.color').click(function () {
        var current_color = $(this).data('color');
    });
</script>

$('img').click(function(){
   var color = $(this).attr('src').split('.')[0];
   alert(color);
});

上面的代码是使用 jQuery 中 img 的 src 获取 var 颜色

你学过jQuery吗？
您需要在主 html 文件中链接 jQuery 库 在 Head 标签之间http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

jQuery允许您选择类选择器并对其应用所需的操作。

您要求组合 2 个动作。1）抓取一个元素2） 对该元素应用单击操作。

jQuery使这变得容易。

jQuery的格式是：$（'element'）.effect（）;

所以回答你的问题：$（'.over'）.click（）;

注意：最好重命名您的类以将颜色与该.png图像相关联，以便稍后您知道您指的是哪个。 您为多个.png图像重复了类名"over"。因此，jQuery将选择类为"over"的每个元素，并将该操作应用于该操作。

现在，您还可以将任何函数应用于该单击事件。

所以例如：

    var color = $('.blue').click(function(){
        if(color === blue){
            return blue;
    }
相关文章：