Question

我有一个小画廊插件，我必须使JSON能够。我成功地提取了数据但脚本不再正常运行。加载数据后，单击缩略图应展开描述区域。

我认为js试图在json将内容加载到页面之前运行。这就像我需要某种基于事件的.on（）功能等待点击。

这是我的json电话

$().ready(function () {
$.getJSON('assets/js/json/demo.json', function (data) {
    //Collection of li elements
    var $items = [];

    $.each(data, function (key, val) {
        $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
    });

    $('<ul/>', {
        'class': 'og-grid da-thumbs',
        'id': 'og-grid',
        html: $items.join('')
        }).appendTo('#myGrid');
    });

});

$(function () {
    Grid.init();
});


var Grid = (function() {

    // list of items
var $grid = $( '#og-grid' ),
    // the items
    $items = $grid.children( 'li' ),
    // current expanded item's index
    current = -1,
    // position (top) of the expanded item
    // used to know if the preview will expand in a different row
    previewPos = -1,
    // extra amount of pixels to scroll the window
    scrollExtra = 0,
    // extra margin when expanded (between preview overlay and the next items)
    marginExpanded = 10,
    $window = $( window ), winsize,
    $body = $( 'html, body' ),
    // transitionend events
    transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition' : 'transitionend',
        'OTransition' : 'oTransitionEnd',
        'msTransition' : 'MSTransitionEnd',
        'transition' : 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    // support for csstransitions
    support = Modernizr.csstransitions,
    // default settings
    settings = {
        minHeight : 500,
        speed : 350,
        easing : 'ease'
    };

Answer 1

在完成回调中放置依赖于json的代码（ .done（））。

一旦成功收到数据，就会执行此操作。您可能需要进行进一步检查以查看数据是否为空，因为回调将运行，即使它是。（我认为它只会在加载或格式化错误时失败。）

我没有更改您在此处添加的代码，只是将其放入完成的回调中。

$.getJSON('assets/js/json/demo.json')
    .done(function(data) {

      // Should probably do more checks here

      //Collection of li elements
      var $items = [];

      $.each(data, function (key, val) {
          $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
      });

      $('<ul/>', {
          'class': 'og-grid da-thumbs',
          'id': 'og-grid',
          html: $items.join('')
        }).appendTo('#myGrid');
    });

});

由于未捕获的ReferenceError：数据未定义错误，我已经仔细检查过这是使用了一个代码版本。

这是有效的：

(function() {

  var flickerAPI = "https://spreadsheets.google.com/feeds/list/o13394135408524254648.240766968415752635/od6/public/values?alt=json";

  $.getJSON(flickerAPI)
    .done(function( data ) {
      $.each(data.feed.entry, function(key, val) {
        console.log(val.title.$t)
    });
  });

})();

JSON打破了我的脚本，但它仍然提取数据

1 个答案: