jQuery.tubular不接受输入

时间:2015-03-08 19:59:38

标签: javascript jquery tubular

我目前正在使用jQuery.tubular(Here)在后台显示YT视频,其中使用YouTube Data API获取ID。管状负载,但没有加载我要求它的视频无论出于何种原因。这是相关的JS:

var output;
$(document).ready(function() {
  getURLPs(); //parses url params into an array, this works
  $('#content').hide().delay(7000).fadeIn('slow');
  console.log('ID: '+urlParams["id"]);
  console.log('Title: '+urlParams["title"]);
  tubularoptions = '{videoId: \''+urlParams["id"]+'\'}';
  console.log('Passing \"'+tubularoptions+'\" to jQuery.tubular.');
  $('#wrapper').tubular(tubularoptions);
  output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v='+urlParams["id"]+'\">'+urlParams["title"]+'</a></span>';
  $('#nowplaying-text').append(output);
  $('#preloader').delay(1000).fadeOut('slow',function(){$(this).remove();});
});

控制台会读取以下内容:

ID: G15btlaZR_k
Title: Ryos ft. Allisa Rose - Eclipse
Passing "{videoId: 'G15btlaZR_k'}" to jQuery.tubular.

然后管状加载默认视频。一切看起来都应该有效,但不是。有线索吗?

1 个答案:

答案 0 :(得分:0)

您传入的是字符串而不是对象

这是有效的

var output;
var urlParams = {id:'G15btlaZR_k', title:'Ryos ft. Allisa Rose - Eclipse'};
$(document).ready(function () {
    $('#content').hide().delay(7000).fadeIn('slow');
    $('#content').hide().delay(7000).fadeIn('slow');
    console.log('ID: ' + urlParams["id"]);
    console.log('Title: ' + urlParams["title"]);
    tubularoptions = '{videoId: \'' + urlParams["id"] + '\'}';
    console.log('Passing \"' + tubularoptions + '\" to jQuery.tubular.');
    //*************************************************
    $('#wrapper').tubular({videoId: urlParams["id"] });
    //*************************************************
    output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v=' + urlParams["id"] + '\">' + urlParams["title"] + '</a></span>';
    $('#nowplaying-text').append(output);
    $('#preloader').delay(1000).fadeOut('slow', function () { $(this).remove(); });
});

这样做

var output;
var urlParams = {id:'G15btlaZR_k', title:'Ryos ft. Allisa Rose - Eclipse'};
$(document).ready(function () {
    $('#content').hide().delay(7000).fadeIn('slow');
    $('#content').hide().delay(7000).fadeIn('slow');
    console.log('ID: ' + urlParams["id"]);
    console.log('Title: ' + urlParams["title"]);
    //*************************************************
    var tubularoptions = { videoId: urlParams["id"] };
    //*************************************************
    console.log('Passing \"' + tubularoptions + '\" to jQuery.tubular.');
    $('#wrapper').tubular(tubularoptions);
    output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v=' + urlParams["id"] + '\">' + urlParams["title"] + '</a></span>';
    $('#nowplaying-text').append(output);
    $('#preloader').delay(1000).fadeOut('slow', function () { $(this).remove(); });
});