在同一个HTML页面中有两个不同版本的JQuery [英] Two different versions of JQuery in the same HTML page

问题描述

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

I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.

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

The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.

我已经搜索了 $ 冲突，但没有一个建议的解决方案有效。

I have googled around to find out about $ conflict but none of the suggested solutions worked.

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

The most common one I have seen and did tried is: var $j = jQuery.noConflict();

如何解决此问题？

推荐答案

如果 插件表现良好，那么这应该有效：

If the plug-ins are well-behaved, then this should work:

<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>

（显然这些脚本名称已经组成。）以下是一个示例（来源 ）（我使用了jQuery 1.4.2和jQuery 1.7.1，因为Google没有主机1.2.2）。

(Obviously those script names are made up.) Here's an example (source) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).

上面的工作原理是表现良好的插件，因为一个表现良好的插件根本不依赖于全局 $ ，而是使用 jQuery的值 global 从加载时开始并在闭包中获取对它的引用，然后在整个插件的代码中使用该本地引用，如下所示：

The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:

// 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 值加载插件时，然后在整个过程中使用其本地别名。

Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.

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

If the plug-in wants to wait for the ready event, it can also do this:

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

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

...which uses the jQuery function passed into the ready handler.

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

Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.

但是我的开头句中的if是 big if。许多插件都不会以这种方式写成防弹。

But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.

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

The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.

这篇关于在同一个HTML页面中有两个不同版本的JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！