0

我有以下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等于“红色”，如果点击蓝色，我需要等于“蓝色”等等......有什么简单的方法可以做到这一点吗？

4

5 回答 5

2

假设每个图像的 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);
}
于 2013-01-22T04:41:11.470 回答
1

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

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

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

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

希望有帮助。

于 2013-01-22T04:36:57.193 回答
1

使用 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>
于 2013-01-22T04:43:19.437 回答
0 
$('img').click(function(){
   var color = $(this).attr('src').split('.')[0];
   alert(color);
});

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

于 2013-01-22T05:23:07.503 回答
-1

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

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;
    }
于 2013-01-22T04:42:49.363 回答