我想要做的是加载和使用Google Spreadsheet JSON中的数据来填充同位素列表,但是一旦我添加JSON,动画和排序功能就会停止运行(我已经验证了JSON / Javascript用于加载它但是我完全不知道如何解决这个问题。在研究中,我确实发现A CODE允许同位素从JSON文件加载元素并仍然起作用,但是我还在学习通过Javascript的方式,我不知道如何将我的Google电子表格JSON集成到该解决方案中。我知道这可能非常简单,但任何帮助我的人都会对此表示最深切的谢意。谢谢! / p>
编辑:这里有JSFIDDLE我的代码!
function importFST(json) {
for (i = 0; i < json.feed.entry.length; i++) {
entry = json.feed.entry[i];
$('.isotope').append('<div class="element-item' + + entry.gsx$alpha.$t + '"><a href="http://' + entry.gsx$url.$t + '.domain.com/" title="' + entry.gsx$skill.$t + '">' + entry.gsx$name.$t + '</a> | "' + entry.gsx$living.$t + '"' + ' | <em>' + entry.gsx$mutation.$t + '</em></div>');
}
}
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
alliance: '.alliance',
number: '.number parseInt',
category: '[data-category]'
}
});
// filter functions
var filterFns = {
// show if name ends with -a
a: function() {
var name = $(this).find('.name').text();
return name.match( /a$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
答案 0 :(得分:1)
你的问题是'element-item'和entry.gsx $ alpha。$ t之间缺少空格。这导致你的同位素项目有一个类,如element-itemaaa,element-itembbb等。你需要添加一个空格来确保 itemSelector:'。elelement-item'
这是一个有效的jsFiddle
这是我的代码(使用附加的同位素改变了你的代码):
function importFST(json) {
// init
for (i = 0; i < json.feed.entry.length; i++) {
entry = json.feed.entry[i];
var $newElems = $('<div class="element-item' + ' ' + entry.gsx$alpha.$t + '"><a href="http://' + entry.gsx$url.$t + '.domain.com/" title="' + entry.gsx$skill.$t + '">' + entry.gsx$name.$t + '</a> | ' + entry.gsx$living.$t + ' | <em>' + entry.gsx$mutation.$t + '</em></div>');
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layout: 'fitRows',
getSortData: {
name: '.name',
alliance: '.alliance',
number: '.number parseInt',
category: '[data-category]'
}
});
// filter functions
var filterFns = {
// show if name ends with -a
a: function () {
var name = $(this).find('.name').text();
return name.match(/a$/);
}
};
// bind filter button click
$('#filters').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
// bind sort button click
$('#sorts').on('click', 'button', function () {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({
sortBy: sortByValue
});
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
$('.isotope').append($newElems).isotope( 'appended', $newElems );
}
}