小女子问大侠，100个img图片，怎么知道点击哪个？

Question

我有100张图片，每张id是从a001到a100，每个<img>都有1个onclick事件，当我点击其中一个图片时
alert(这张图片的id值）
还有假如一个页面有很多不同的控件怎么找到我点击的是哪个控件，alert(这个控件的id值）

Answer 1

比如这个控件的点击事件如下
图片添加点击事件这样<img id='xxx' onclick='onclickimage(this)' />
function onclickimage(t){
 alert(t.id);
}

Answer 2

建议将所有事件绑定到其父容器上，因为这样更加高效
div.onclick=function(e){
var el=window.event?event.srcElement:e.target;
if(el.nodeName=="IMG"){
alert(el.id)
}
}

Answer 3

<div>dsdsdsds</div>
<img src="" id="a001">
<img src="" id="a002">
.....................
<img src="" id="a100"><script type=text/javascript>
document.onclick = function(e) {
    var e = e || window.event;
    var o = e.srcElement || e.target;
    o.tagName == "IMG" && alert(o.id)
}
</script>

Answer 4

如果能用到jQuery也是不错的事情var $imgs = $('img[id^="a"]');
$imgs.onclick(function(){
    alert($(this).attr('id'));
})

Answer 5

最喜欢小女子的提问，清晰明了。答案如下：function bindeventtoimg()   
{
var imgs=document.getElementsByTagName("img");
for(i in imgs){
if(imgs[i].id && /^a\d{3,3}$/.test(imgs[i].id) ){
imgs[i].onclick=function(e){
var id=this.id;
alert('图片的id值:'+id+';你点击了id为'+id+'的img');
}
}
}
}
window.onload=bindeventtoimg;
</script>
<div id="abc">
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a001' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a020' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a200' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a05' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a105' /><hr />
</div>

Answer 6

‍<script type="text/javascript">
function bindeventtocontainer()   
{
var container=document.getElementById('container');//包含所有img的element
container.onclick=function(e){
var el=window.event?event.srcElement:e.target;
var id=el.id;
if(id && /^a\d{3,3}$/.test(id) )
alert('图片的id值:'+id+';你点击了id为'+id+'的img');
}
}
window.onload=bindeventtocontainer;
</script>
<div id="container" >
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a001' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a020' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a200' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a05' /><hr />
<img src="http://www.baidu.com/img/baidu_logo_jr_1011_aizi_5a1db24975a30a6ac5f3afd5ea2d2bbf.gif" id='a105' /><hr />
</div>

Answer 7

使用css的expression内嵌javascript:
<style type="text/css">
   img {star : expression(onclick=function(){
                                  window.alert(this.id);
                           })
               }
</style>

Answer 8

<img id="img1" src="" onclick="alert(this.id);" />
<img id="img2" src="" onclick="alert(this.id);" />

Answer 9

onclick='onclickimage(this)' 
反正就是加个什么标记ID什么的能区分就OK了.

Answer 10

。。用jQuery  给你要找的控件一个相同的class$(".xxx_Class").each(function(){
alert($(this).attr("id"));
});

Answer 11

我认为使用弹出ID的方法还是不够直观。
我建议每次点击就给它加上颜色边框这样就一目了然了
<style>
.ImgBorder{border:solid #0080C0 2px;}
</style>$("#abc").find("img").each(function(){
  $(this).click(
     function(){
         
        $(this).siblings().removeClass("ImgBorder");//反选其他没有选中的对象，并去掉边框样式
        $(this).addClass("ImgBorder");//给选中的对象添加边框样式     }
  );
})

Answer 12

<img onclick="doit(this)" src="xxx............/>
这里就可以知道呀.