Question

这是我的第一篇文章，我不是程序员，只是偶尔为我正在进行的项目整理网络代码的人。

我正在尝试在我正在处理的网站上实现滚动的Twitter选框，但我遇到了“未捕获的参考错误：Jquery未定义”错误。

我认为这是因为没有正确包含Jquery或者包含失败。我尝试了以下内容：

包含来自不同网址的Jquery，以及在本地托管
更改我的include语句序列，以便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/

Answer 1

首先添加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>

Answer 2

将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
});

未捕获的引用错误：未定义Jquery

2 个答案: