如何实现一个div数组的onclick函数

时间:2013-10-27 00:20:31

标签: javascript jquery html css flickr

我正在使用Flickr API,我想为每个图像创建一个onlick popup div,以更大的形式显示图像,如http://fancybox.net/

如何实现这一点,以便onclick函数将应用于div容器中的每个div?

项目:http://jsfiddle.net/phippsy20/rtzp8/

jQuery:所以这个语句使得divs

for (var i = 0; i < 210; i++) {
  $('<div />').attr('id', 'photo-' + i).addClass('photo').appendTo('#photo-container');
}

此功能将flickr中的图片作为背景图片加载:

$.each(data.photos.photo, function(i, photo) {
        var imgURL = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_n.jpg';

        console.log(imgURL);

        // Pre-cache image
        $('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
           console.log('image loaded');
           var imageDataNum = $(this).attr('data-image-num');
           $('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');

        })

1 个答案:

答案 0 :(得分:1)

好的,如果我理解你的问题,这可能会对你有所帮助:

$("#heading-name div").each(function(i){        
    $(this).attr("onclick","popup("+i+")");
});

演示工作:http://jsfiddle.net/k2h8p/1/(在您的计算机本地测试代码)