Question

我有一个HTML文档，我在thickbox的标题中引用了jQuery 1.2.2版，后来我在</body>标记之前引用了jQuery 1.7.1，用于图片幻灯片。

问题是除非删除jQuery 1.7.1的引用然后停止幻灯片工作，否则thickbox将无法工作。

我已经开始搜索有关$冲突的信息，但没有一个建议的解决方案有效。

我见过并尝试过的最常见的是：var $j = jQuery.noConflict();

我该如何解决这个问题？

Answer 1

如果插件表现良好，那么这应该可行：

<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>

（显然这些脚本名称已经组成。）Here's an example（source）（我使用jQuery 1.4.2和jQuery 1.7.1，因为Google没有主持1.2.2）。

以上内容适用于性能良好的插件，因为行为良好的插件根本不依赖于全局$，而是使用jQuery global <的值em>在加载时并在闭包中获取对它的引用，然后在整个插件的代码中使用该本地引用，如下所示：

// Example plug-in setup
(function($) {
    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
})(jQuery);

或

(function() {
    var $ = jQuery;

    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
})();

这两个版本在加载插件时都会获取全局jQuery值，然后在整个过程中使用其本地别名。

如果插件想要等待就绪事件，它也可以这样做：

jQuery(function($) {
    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
});

...使用传递给就绪处理程序的jQuery函数。

这三个中的任何一个都能正常工作（使用thickbox查看jQuery 1.2.2，幻灯片显示jQuery 1.7.1），并使用上面列出的脚本加载顺序。

但是我的开头句中的“if”是 big “if”。很多插件都没有以这种方式编写为防弹。

尽管如此，我还是会迁移出任何需要 jQuery 1.2.2的插件才能工作，并尽可能（并且几乎总是可能的））避免在同一页面中加载任何库的两个不同版本，包括jQuery。

Answer 2

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
  var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  var jQ171 = jQuery.noConflict();


  (function($) { 
    $(function() {
      // here $ is jQuery 1.2.2
    });
  })(jQ122);


  (function($) { 
    $(function() {
      // here $ is jQuery 1.7.1
    });
  })(jQ171);
</script>

Answer 3

我不建议使用两个不同版本的jQuery。厚盒的其他一些替代品与最新的jQuery完美配合。

Answer 4

你想要做的是一个非常糟糕的做法（你确实应该将所有代码迁移到同一个版本）但理论上可以做到......

无论如何你都需要对相应的插件进行更改...... 考虑这段代码：

<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;

然后你会在jQuery交给插件的地方更改你的插件代码，这看起来类似于：

(function( $ ){
     // all your plugins code would be here
})( jQuery );     // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables

请注意......至少可以说这非常麻烦！写清洁代码或以后付款！：）

Answer 5

虽然您可以使用jQuery.noConflict();同时声明不同版本的jQuery。

当我这样做时，我经常遇到IE8与某些库的一些问题。

因此，另一种解决方案是使用iframe在当前页面中加载页面。

在一个页面上有一个给定版本的jQuery，在第二个页面上有另一个版本。

例如：

<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>

在同一个HTML页面中有两个不同版本的JQuery

5 个答案: