JSON破坏了我的脚本，但它仍然拉入数据

JSON broke my script but it still pulls in the data

本文关键字：数据 坏了 我的 脚本 JSON      更新时间：2023-09-26

我有一个小画廊插件，我必须使JSON能够。我成功地拉入数据，但脚本不再发挥应有的作用。一旦数据被加载，点击缩略图应该会展开一个描述区域。

我认为js试图在json加载内容到页面之前运行。这就像我需要某种。on()功能，不是基于事件等待点击。

整个js提琴http://jsfiddle.net/xM386/

这是我的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'
    };

放置依赖于done回调中的json的代码(.done())。

这将在成功接收到数据后执行。您可能需要做进一步的检查，以确保数据不是空的，因为回调将运行，即使它是空的。(我认为它只有在加载或格式错误时才会失败)。

我没有改变你在这里添加的代码，只是把它放在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');
    });
});

因为Uncaught ReferenceError: data is not defined errors我已经仔细检查了这是一个版本的代码。

正在运行:

(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)
    });
  });
})();
相关文章：