说我有这个：
<div class='container'>
<img src='image1' id='1' />
<img src='image2' id='2' />
...
</div>
<div class='container'>
</div>
现在,当我点击容器时,我想获取其中的图像的ID.如果容器不包含图像,则应该弹出错误,表示容器中没有图像.否则,我想获得里面图像的所有ID的列表.
使用jQuery,我有这个：
$('.container').click(function()
{
var images = $(this).find('img');
if( images[0] == null ) { //no image found }
else
{
// No idea what to do here :P
}
}
有人可以请你帮我(我的意思是在其他{}声明里面)？谢谢 ：)
解决方法
$(document).on("click",".container",function(){
var img = $(this).find("img"),// select images inside .container
len = img.length; // check if they exist
if( len > 0 ){
// images found,get id
var attrID = img.first().attr("id"); // get id of first image
} else {
// images not found
}
});
要获取容器中所有图像的ID数组：
var arr = []; // create array
if( len > 0 ){
// images found,get id
img.each(function(){ // run this for each image
arr.push( $(this).attr("id") ); // push each image's id to the array
});
} else {
// images not found
}
当然,如果我没有给你一个纯JS的例子,我会成为什么样的人：
var elems = [].slice.call( document.getElementsByClassName("container") );
elems.forEach( function( elem ){
elem.onclick = function(){
var arr = [],imgs = [].slice.call( elem.getElementsByTagName("img") );
if(imgs.length){
imgs.forEach( function( img ){
var attrID = img.id;
arr.push(attrID);
});
alert(arr);
} else {
alert("No images found.");
}
};
});
Example.有点复杂,我仍然建议使用jQuery,因为它清除了所有跨浏览器鼠标事件的疯狂.
