一页上有多个jQuery答案

【问题标题】：Multiple jQuery on one page一页上有多个jQuery
【发布时间】：2013-09-16 14:01:06
【问题描述】：

我对 jQuery 很陌生，但遇到了一些麻烦。我有一个简单的杂耍和一个我想使用的天气插件，但由于某种原因，当我同时实现它们时它们都不起作用。

<script src="js/jquery.js"></script>
<script src="js/fadeSlideShow-minified.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fadeSlideShow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zweatherfeed.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').fadeSlideShow();
});
</script>

<script type="text/javascript">
$(document).ready(function () {
$('#test').weatherfeed(['1580050']);
});
</script>

【问题讨论】：

好的，刚刚看到你包含两个jquery版本，为什么？如果某些插件使用较旧的 jq 版本，只需迁移它。在同一上下文页面上使用多个 jquery 版本绝不是一个好主意...而且您似乎也包含了两次 fadeSlideShow，再次错误...
您似乎包含了一些文件两次，一次是未压缩的变体（js/jquery.js，js/fadeSlideSho.js），另一次是缩小的变体（http://ajax.googleapis.com/ajax/libs/jquey/1.7.1/jquery.min.js，js/fadeSlideShow-minified.js）。跨度>
我已经合并了大家的cmets。我的 slimpleslideshow 现在可以工作了，但是天气插件不起作用。这是为您提供更多想法的链接 - 它仍在进行中：creatiff.co.za/emilling/index.html

标签： javascript jquery plugins slideshow weather

【解决方案1】：

您似乎正在加载两个版本的 jQuery 和两个 fadeSlideShow 文件，试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/fadeSlideShow-minified.js" type="text/javascript"></script>
<script src="jquery.zweatherfeed.min.js" type="text/javascript"></script>

你可以把你的两个调用写成一个$(document).ready()：

<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').fadeSlideShow();
    $('#test').weatherfeed(['1580050']);
});
</script>

此外，如果您检查 JavaScript 控制台以查看是否出现任何错误消息并将 HTML 代码也提供给我们，这将有所帮助。

【讨论】：

【解决方案2】：

每个页面只需要一个版本的 jQuery。

// This is one
<script src="js/jquery.js"></script>
<script src="js/fadeSlideShow-minified.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fadeSlideShow.js"></script>
// This is another - delete this one.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zweatherfeed.min.js" type="text/javascript"></script>

你也不需要fadeSlideShow的缩小版和非缩小版

【讨论】：

【解决方案3】：

你已经收录了

fadeSlideShow-minified.js 和 fadeSlideShow.js

在您的脚本中，我认为它们是相同的。因为fadeSlideShow-minified.js 是fadeSlideShow.js 的最小版本，所以只需从您的页面中删除js/fadeSlideShow.js 的脚本标签并检查它。它现在应该可以工作了。

【讨论】：

【解决方案4】：

您只需要包含一次 jquery 库。删除这一行

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

【讨论】：

【解决方案5】：

里面的数字是多少

$('#test').weatherfeed(['1580050']);

如果是WOEID，必须这样使用：

$('#test').weatherfeed(['44418'],{
    woeid: true
});

这意味着，您必须对您的插件说，您使用的位置服务与默认服务不同。

Try Demo

为什么你实现了不止一个 jQuery 库？尝试最新的 jQuery 版本（2.0 或 1.10.2）。

有很多可选的原因，为什么它不能工作。

希望对你有帮助。

【讨论】：

我已经合并了大家的cmets。我的 slimpleslideshow 现在可以工作了，但是天气插件不起作用。这是给你更多想法的链接 - 它仍在进行中：creatiff.co.za/emilling/index.html