不确定标题是否有意义,但这是我的问题;
我目前使用Dropbox分享家庭照片,尝试根据内容将它们全部放入自己的DIV中的HTML页面。
我通过看起来像这样的JSON文件加载它们
[
{
"Birthday": "10"
},
{
"Camping": "20"
},
{
"July Fourth": "50"
}
]
使用jQuery .ajax加载它们
$(document).ready(function () {
$.ajax({
url: 'events.json',
success: function(response) {
$.each(response, function() {
$.each(this, function(name, photos) {
$('#container').append('<div class="gallery" name="' + name + '"></div>');
$('div[name="' + name + '"').append(function() {
for ( var i = 1; i <= photos; i++) {
if (i < 10) {
$('.gallery').append('<a class="fancybox" rel="' + this + '" href="' + name + '/0' + i + '.jpg"><img class="img" src="' + name + '/0' + i + '.jpg" /></a>');
} else {
$('.gallery').append('<a class="fancybox" rel="' + this + '" href="' + name + '/' + i +'.jpg"><img class="img" src="' + name + '/' + i + '.jpg" /></a>');
}
}
});
});
});
}
});
$(".fancybox").fancybox();
});
它创建了所需的每个DIV,但不是将每个DIV放在他们自己的堆栈中
生日包含&#34;生日,露营,7月4日&#34;
野营包含&#34;露营,7月4日&#34;7月4日包含自己
如何让它不包含每个类别?
答案 0 :(得分:0)
我实际上已经弄明白了如何解决这个问题,这很简单,而且我的结局总是很明显
我刚刚将$(&#39; .gallery&#39;)。append()s更改为$(this).append()
另外,我知道JSON不是很好,我已经解决了这个问题。
$.getJSON("events.json", function(data) {
$.each(data, function(index, d) {
var name = d.name;
var photos = d.count;
$('#container').append('<div class="gallery" name="' + name + '"></div>');
$('div[name="'+name+'"]').append(function() {
for ( var i = 1; i <= photos; i++) {
if (i < 10) {
$(this).append('<a class="fancybox" rel="' + this + '" href="' + name + '/0' + i + '.jpg"><img class="img" src="' + name + '/0' + i + '.jpg" /></a>');
} else {
$(this).append('<a class="fancybox" rel="' + this + '" href="' + name + '/' + i +'.jpg"><img class="img" src="' + name + '/' + i + '.jpg" /></a>');
}
}
});
});
});
答案 1 :(得分:0)
这是..希望它不会太复杂..
// Kind of necessary in the way my solution works
function getPropertyName(prop, value) {
for (var i in prop) {
if (prop[i] == value) {
return i;
}
}
return false;
}
$(document).ready(function () {
$.ajax({
url: 'events.json',
success: function(response) {
$.each(response, function( index, gallery ) {
// gallery[Object.keys(gallery)[0]] gets the first property of the gallery object
var galleryName = getPropertyName(gallery, gallery[Object.keys(gallery)[0]]);
var numPhotos = parseInt(gallery[galleryName]);
// I used 'data-name' instead of 'name' as the attribute to keep it more in line with the HTML standard
$('#container').append('<div class="gallery" data-name="' + galleryName + '"></div>');
for (var i = 1; i <= numPhotos; i++) {
$('div[data-name="' + galleryName + '"').append(function() {
if (i < 10) {
$(this).append('<a class="fancybox" href="' + galleryName + '/0' + i + '.jpg"><img class="img" src="' + galleryName + '/0' + i + '.jpg" /></a>');
} else {
$(this).append('<a class="fancybox" href="' + galleryName + '/' + i +'.jpg"><img class="img" src="' + galleryName + '/' + i + '.jpg" /></a>');
}
});
};
});
$('.fancybox').fancybox();
}
});
});