Question

我有一位客户正在尝试为其网站添加一些其他功能。他们目前正在使用一个自我安装的jQuery 1.6.1库，它被缩小。

我正在尝试安装Foundation 4的揭密模式，这需要更新的jQuery库才能正常工作。如果我安装一个较新的jQuery版本但是它会破坏网站上的现有脚本，我可以使用揭密模式。

我现在正在尝试运行我在网上找到的noConflict方法，但我仍然无法让它正常工作。

在标题中，我有以下内容允许加载两个jQuery库：

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.6.2.min.js"></script> 

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.10.2.js"></script>
<script type='text/javascript'>  
 var $jq = jQuery.noConflict(true);   
</script>

然后在主页的正文中我有：

<script>

$jq(document).foundation();

$jq(".close-reveal-modal").click(function(){
$jq('iframe#vimeo-player').attr('src',''); 
}); 

$jq(".big-link").click(function(){
$jq('iframe#vimeo-player').attr('src','//player.vimeo.com/video/93263452?title=0&amp;byline=0&amp;portrait=0&autoplay=1');
}); 

</script>

如何在noConflict模式下使用它？

网站的网址为：http://developer.creativ3group.com/sodaspeaks/

Answer 1

在添加第二版jQuery之前，您需要设置noConflict。试试这个：

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript">
    var $jq162 = $.noConflict(true);
</script>

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.10.2.js"></script>
<script type="text/javascript">  
    var $jq1102 = $.noConflict(true);   
</script>

只使用最新的单个库是一个更好的解决方案，尽管显然时间并不总是允许的。

Answer 2

如果您正确使用wp_enqueue_script将WordPress中的jQuery库排入队列，它们将以正确的顺序加载，并且不会出现冲突模式。

并且，没有理由加载两个jQuery版本;一个人会这样做。加载最新版本并修复脚本以使用它。使用$代替$jq。

请参阅http://codex.wordpress.org/Function_Reference/wp_enqueue_script

在Firefox中使用Firebug，或使用Chrome或Safari或IE中的开发者工具查看您网站上的javascript加载内容以及错误。

同一站点上的多个jQuery库（WordPress）

2 个答案: