javascript - 同位素 : Dynamic JSON loaded from Google Spreadsheet

Question

我想做的是加载并使用 Google Spreadsheet JSON 中的数据来填充同位素列表，但是一旦添加 JSON，动画和排序功能就会停止运行(我已经验证了用于加载它的 JSON/Javascript有效，但我完全不知道如何解决这个问题。在研究中，我确实发现 A CODE 允许同位素从 JSON 文件加载元素并且仍然起作用，但是我仍在通过 Javascript 学习我的方法和我不确定如何将我的 Google 电子表格 JSON 集成到该解决方案中。我知道这可能非常简单，但任何帮助我的人都将深表谢意。谢谢!

编辑:这是一个 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');
    });
  });

});

Answer 1

您的问题是“element-item”和entry.gsx$alpha.$t 之间缺少空格。这导致您的同位素项目具有 element-itemaaa、element-itembbb 等类。您需要添加一个空格以确保 itemSelector: '.element-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 );

}
}