Question

我正在http://fremont.alchemycs.com开发一个WordPress网站，我一直在遇到jQuery问题。页面上有两个使用jQuery的功能 - 页面顶部的幻灯片显示和侧边栏中的折叠式菜单。出于某种原因，我无法让他们同时工作。我得到一个或另一个“不是函数”错误，具体取决于我加载jQuery的位置。

这是我现在的标题：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Fremont, Seattle</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://fremont.alchemycs.com/wp-content/themes/center/style.css" />
<link rel="pingback" href="http://fremont.alchemycs.com/xmlrpc.php" />
<!--
<script src="http://fremont.alchemycs.com/wp-content/themes/center/js/modernizr-1.6.min.js"></script>
-->
<link rel="alternate" type="application/rss+xml" title="Fremont, Seattle &raquo; Feed" href="http://fremont.alchemycs.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Fremont, Seattle &raquo; Comments Feed" href="http://fremont.alchemycs.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Fremont, Seattle &raquo; Home Comments Feed" href="http://fremont.alchemycs.com/home/feed/" />
<link rel='stylesheet' id='ccf_custom-css'  href='http://fremont.alchemycs.com/wp-content/plugins/constant-contact-form/class/ccf_custom.css?ver=3.2.1' type='text/css' media='screen' />
<link rel='stylesheet' id='contact-form-7-css'  href='http://fremont.alchemycs.com/wp-content/plugins/contact-form-7/styles.css?ver=3.1' type='text/css' media='all' />
<link rel='stylesheet' id='amr-ical-events-list-css'  href='http://fremont.alchemycs.com/wp-content/plugins/amr-ical-events-list/css/icallist.css?ver=1' type='text/css' media='all' />

<link rel='stylesheet' id='amr-ical-events-list_print-css'  href='http://fremont.alchemycs.com/wp-content/plugins/amr-ical-events-list/css/icalprint.css?ver=1' type='text/css' media='print' />
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/constant-contact-form/class/ccf_ajax.js?ver=3.2.1'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js?ver=3.2.1'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.cookie.js?ver=3.2.1'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.9.js?ver=3.2.1'></script>
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://fremont.alchemycs.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://fremont.alchemycs.com/wp-includes/wlwmanifest.xml" /> 

<link rel='index' title='Fremont, Seattle' href='http://fremont.alchemycs.com/' />
<link rel='next' title='Calendar' href='http://fremont.alchemycs.com/events/' />
<meta name="generator" content="WordPress 3.2.1" />

<!-- All in One SEO Pack 1.6.13.8 by Michael Torbert of Semper Fi Web Designob_start_detected [-1,-1] -->
<meta name="description" content="The Center of the Universe" />
<link rel="canonical" href="http://fremont.alchemycs.com/" />
<!-- /all in one seo pack -->
<link rel="stylesheet" type="text/css" href="http://fremont.alchemycs.com/wp-content/plugins/social-media-widget/social_widget.css" />
<link rel='stylesheet' id='wop-css'  href='http://fremont.alchemycs.com/wp-content/plugins/widgets-on-pages/wop.css' type='text/css' media='all' /><!-- BEGIN Hackadelic Sliding Notes 1.6.5 -->
<style type="text/css">
.concealed { display: none }
.block { display: block }
</style>
<!-- END Hackadelic Sliding Notes 1.6.5 -->

    <script src="http://fremont.alchemycs.com/wp-content/themes/center/js/jquery.flexslider.js"></script>

    <link rel="stylesheet" type="text/css" media="all" href="http://fremont.alchemycs.com/wp-content/themes/center/css/flexslider.css" />
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider();
      });
    </script>

</head>

当以上是我的标题时，我收到一条错误消息：$不是函数

但是如果我在标题后面更改标题以加载jQuery，我会得到关于手风琴菜单功能的类似错误。

这可能很简单，但我无法搞清楚。

谢谢！

编辑 - 让我强调一下，我已经尝试了加载jQuery的地方，即使我在标题的顶部这样做，所以它是第一件事，只有一个脚本可以工作。

Answer 1

首先应包含jquery.js，然后包含使用js的其余插件jQuery文件，命令确实很重要，并将jQuery代码包装在ready处理程序中

$(function(){
 //
});

Answer 2

确保首先加载jQuery核心。这意味着这一行

<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

应该是第一个脚本标记。

Answer 3

您必须在任何其他插件

之上添加jquery代码引用
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

相反您可以使用google lib引用最新的jquery版本（1.7.1）

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

它应该增加用户的下载时间（它应该是第一个脚本标记。）。

jQuery加载问题

3 个答案: