1

这是我的第一篇文章，我不是程序员，只是偶尔为我正在从事的项目拼凑来自整个网络的代码的人。

我正在尝试在我正在开发的网站上实现滚动 Twitter 字幕，但遇到了“未捕获的引用错误：未定义 Jquery”错误。

我认为这是因为 Jquery 没有被正确包含或包含失败。我尝试了以下方法：

  1. 包括来自不同 URL 的 Jquery，以及在本地托管它
  2. 更改 my 中包含语句的顺序，以便 Jquery 排在第一位

我在 SO 上发现了一些类似的线程，但没有一个有助于解决这个问题。

这是我的代码：

<head>
<meta charset="UTF-8" />
<title>UnBox 2013 : Venues</title>
<link rel="stylesheet" type="text/css" media="all" href="/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lekton:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic,700' rel='stylesheet' type='text/css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
<script src='/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/jquery.marquee.js'/> 


<script type='text/javascript'>

var Tweetstream = {
init: function () {
this.insertLatestTweets('unboxfestival');
}, 
insertLatestTweets: function (username) {
 var limit = 5; // How many feeds do you want?
 var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?'; 

 $.getJSON(url, function (data) {
  var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';

  for (var i in data) {
   html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
  }

  html += '</marquee>';

  $('.tweetstream p').replaceWith(html);

  Twitter.fancyMarquee();
 });
}, 

fancyMarquee: function () {
 $('.tweetstream marquee').marquee('pointer')
  .mouseover(function () {
   $(this).trigger('stop');
  })
  .mouseout(function () {
   $(this).trigger('start');
  })
  .mousemove(function (event) {
   if ($(this).data('drag') == true) {
    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
   }
  })
  .mousedown(function (event) {
   $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
  })
  .mouseup(function () {
   $(this).data('drag', false);
  });
}, 

daysAgo: function (date) {
 // TODO: Fix date for IE...
 if ($.browser.msie) {
  return '1 day ago';
 }

 var d = new Date(date).getTime();
 var n = new Date().getTime();

 var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
 var daysAgo = numDays + ' days ago';

 if (numDays == 0) {
  daysAgo = 'today';
 }
 else if (numDays == 1) {
  daysAgo = numDays + ' day ago';
 }

 return daysAgo;
}
};

Tweetstream.init();
</script>
</head>

我希望这不是垃圾邮件，如果这里有一个您认为可以回答问题的帖子，请随时为我指明正确的方向。

大部分代码来自这里：http ://andreaslagerkvist.com/archives/2011/06/24/how-to-create-a-scrolling-twitter-feed-using-jquery/

4

2 回答 2

0

首先添加jquery脚本标签，jquery代码应该是document.ready

<head>
<meta charset="UTF-8" />
<title>UnBox 2013 : Venues</title>
<link rel="stylesheet" type="text/css" media="all" href="/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lekton:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic,700' rel='stylesheet' type='text/css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
<script src='/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/jquery.marquee.js'/> 


<script type='text/javascript'>
$(document).ready(function() {
var Tweetstream = {
init: function () {
this.insertLatestTweets('unboxfestival');
}, 
insertLatestTweets: function (username) {
 var limit = 5; // How many feeds do you want?
 var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?'; 

 $.getJSON(url, function (data) {
  var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';

  for (var i in data) {
   html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
  }

  html += '</marquee>';

  $('.tweetstream p').replaceWith(html);

  Twitter.fancyMarquee();
 });
}, 

fancyMarquee: function () {
 $('.tweetstream marquee').marquee('pointer')
  .mouseover(function () {
   $(this).trigger('stop');
  })
  .mouseout(function () {
   $(this).trigger('start');
  })
  .mousemove(function (event) {
   if ($(this).data('drag') == true) {
    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
   }
  })
  .mousedown(function (event) {
   $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
  })
  .mouseup(function () {
   $(this).data('drag', false);
  });
}, 

daysAgo: function (date) {
 // TODO: Fix date for IE...
 if ($.browser.msie) {
  return '1 day ago';
 }

 var d = new Date(date).getTime();
 var n = new Date().getTime();

 var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
 var daysAgo = numDays + ' days ago';

 if (numDays == 0) {
  daysAgo = 'today';
 }
 else if (numDays == 1) {
  daysAgo = numDays + ' day ago';
 }

 return daysAgo;
}
};
}
Tweetstream.init();
</script>
</head>
于 2012-12-10T13:20:39.157 回答
0

将 type="text/javascript" 添加到您的 jQuery 引用标签 -

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type="text/javascript">

此外，您要么希望移动 URL 末尾的单引号，要么删除斜杠。

然后将您的代码包含在文档准备好的包装器中 -

$(document).ready(function() {
    // your code here
});
于 2012-12-10T13:35:14.843 回答