Question

我一直在尝试使用容器更新带有图像的html文件中的div，然后将图像标记添加到其中。如下所示：

var linksContainer = $('#links');

var thisURL = document.URL;         

//check if there is a id or not
if(thisURL.indexOf('?') === -1)
{    
//no '?' found therefore all photos in "data" are added to the gallery

//then add these photos one by one
for (i = 0; i < data.count; i++) 
         { //count parameter has been set up as the number of photos

            //selecting the i-th photo in the list of photos
            dataPhoto = data.photos[i];

            //then add these photos one by one
             $('<a/>').append($('<img>')
             .prop('src', dataPhoto.photo_file_url))
             .prop('title', dataPhoto.photo_title)
             .attr('data-gallery', '')
             .appendTo(linksContainer);
        }
}

其中html很简单 <div id="links"></div>

我做了一个jsfiddle并注意到它在第一行失败了 - 但其余代码按预期工作，为什么我不能以这种方式引用div？

注意：我正在使用bootstrap-gallery-gallery并编辑了演示中使用的代码，如下所示：https://github.com/blueimp/Bootstrap-Image-Gallery/blob/master/js/demo.js - 我正在编辑的部分不是从flickr添加图像我是从本地资源中添加的。

Answer 1

Here's a js fiddle显示您的代码应该有效。

var linksContainer = $('#links');
var data={count:1, photos:[{photo_file_url:'https://www.google.com/images/srpr/logo11w.png',photo_title:"asd"}]};

for (i = 0; i < data.count; i++) { 
    var dataPhoto = data.photos[i];    
    $('<a/>').append($('<img>').prop('src', dataPhoto.photo_file_url))
    .prop('title', dataPhoto.photo_title)
    .attr('data-gallery', '')
    .appendTo(linksContainer);
}

如果它不在小提琴外工作，请确保在创建链接元素后执行javascript。最常见的方法是将脚本标记作为body标记内的最后一个元素。

从javascript引用div - jsfiddle失败

1 个答案: