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);
}

Answer 2

您可以使用图片标记保留颜色属性

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

然后你可以通过附加一个onclick函数（）来访问js：

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

希望有所帮助。

Answer 3

使用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>

Answer 4

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

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

Answer 5

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

jQuery允许您选择类选择器并应用您想要的操作。

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

jQuery使这很容易。

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

所以回答你的问题： $（ '上方'）点击（）;

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

您现在也可以对该点击事件应用任何功能。

例如：

    var color = $('.blue').click(function(){
        if(color === blue){
            return blue;
    }

通过html图像更改javascript变量

5 个答案: