Javascript幻灯片不适用于多个页面答案

【问题标题】：Javascript slideshow not working on multiple pagesJavascript幻灯片不适用于多个页面
【发布时间】：2013-09-12 16:53:38
【问题描述】：

我有一个来自 Twitter Bootstrap 2.3.2 文档的 javascript 驱动的轮播，我在 Wordpress 主题中使用它。

我有它的两个实例，第一个实例在主页上工作正常，但另一个实例未能初始化，引用“TypeError: $ is not a function

$(document).ready(function () {" Firebug 中的错误

这是我在标题中的代码：

<!doctype html>
<html <?php language_attributes(); ?>>
 <head>
 <meta charset="<?php bloginfo('charset');?>">
 <title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s' ), max( $paged, $page ) );
?></title>

<link href="<?php echo get_template_directory_uri(); ?>/css/carousel.css" rel="stylesheet" type="text/css" media="all"/>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css" media="all">
<script src="wp-content/themes/xxx/js/jquery-1.9.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/nav.js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
scrollwheel: false,
center: new google.maps.LatLng(13.094297,-59.601735),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<?php wp_head(); ?>

这是对象：

<div class="carousel-main">
<div class="carousel slide" id="myCarousel1">
<div class="carousel-inner inner-carousel">
<div class="item active"><img class="alignnone size-full wp-image-53" alt="vacationing-1" src="http://yyy.com/xxx/wp-content/uploads/2013/08/vacationing-1.jpg" width="800" height="350" /></div>
</div>
<a class="left carousel-control" href="#myCarousel1" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel1" data-slide="next"></a>

</div>
</div>

这是页脚脚本：

<script type="text/javascript">
$(document).ready(function () {

$('#myCarousel, #myCarousel1').carousel('pause');
});
</script>

【问题讨论】：

标签： javascript jquery html wordpress twitter-bootstrap

【解决方案1】：

我认为你没有加载 Jquery 你可以检查它是否加载了调试工具？请在 chrome 中单击 F12 并查看是否正在加载 Jquery 消息 $ is not a function 基本上说它找不到 jquery

【讨论】：

已排序。我必须使用。现在就像一个魅力。

【解决方案2】：

在链接的开头添加一个飞溅/，如下所示：

<script src="/wp-content/themes/xxx/js/jquery-1.9.1.min.js"></script>

【讨论】：

【解决方案3】：

首先检查页面中是否有 jQuery ($)。

尝试用 jQuery 替换 $

【讨论】：

【解决方案4】：

use class insted of id for multilple slider at single page

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

【讨论】：