兩個不同的jquery.js文件位於同一個html文件

-1

我想添加一個Wowslider的照片滑塊，它使用jQuery v1.8.3在我的網站上有一個基於jQuery的導航菜單，但我不知道確切的版本（這裏是我拿到源文件的tutorial）兩個不同的jquery.js文件位於同一個html文件

當註釋掉兩個jquery.js文件中的一個時，另一個工作正常。但是，一起出現問題我無法從Wowoslider製作滑塊，並且動畫菜單正常工作。

我的HTML代碼是這些。問題自帶的js/jquery.js和（未知版本）和引擎1/jquery.js和（1.8.3版本）

<script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-bp.js"></script> 
    <script type="text/javascript" src="js/navigation.js"></script> 
    <script type="text/javascript" src="date_time.js"></script> 
    <!-- Start WOWSlider.com HEAD section --> 
    <link rel="stylesheet" type="text/css" href="engine1/style.css" /> 
    <script type="text/javascript" src="engine1/jquery.js"></script> 
    <!-- End WOWSlider.com HEAD section --> 
</head>

我試試這個Can I use multiple versions of jQuery on the same page?

的解決方案看起來很簡單，但我可以」 t瞭解這個

然後，而不是$('#selector').function();，你會做jQuery_1_3_2('#selector').function();或jQuery_1_1_3('#selector').function();。

我改變包括腳本代碼在我的HTML這樣的：

<!-- load jQuery 1.2.3 --> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
    var jQuery_1_2_3 = $.noConflict(true); 
    </script> 
      <!-- ...other code... --> 
    <!-- load jQuery 1.8.3 --> 
    <script type="text/javascript" src="engine1/jquery.js"></script> 
    <script type="text/javascript"> 
    var jQuery_1_8_2 = $.noConflict(true); 
    </script>

然後我試圖改變2個.js文件的是使用jQuery 1.2.3 ，所以我更換所有$字符的代碼此jQuery_1_2_3

一個排序示例默認是

（函數（$）{$ .extend（$。fx.step，{ backgroundPosition：function（fx）{fx.state === 0 & & typeof fx.end =='string'）var start = $ .curCSS（fx.elem，'backgroundPosition'）;

而且我改成這樣：

(function(jQuery_1_2_3) { jQuery_1_2_3.extend(jQuery_1_2_3.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = jQuery_1_2_3.curCSS(fx.elem,'backgroundPosition');

我想我明白什麼不對..鋼不工作..

來源

2013-02-05 sudogetit

如果你堅持在你的網站中使用jQuery的兩個版本，你需要調用jQuery.noConflict（）。以下是文檔 - http://api.jquery.com/jQuery.noConflict/除此之外，如果您將發佈相關代碼和標記，我們將盡力幫助您解決此問題。 –

來自網站的人是1.2.3。很古老。儘量只使用1.8.3。 –

另外我Firefox瀏覽器一起工作的滑塊和導航菜單沒有明顯的問題..我想找到一個解決方案在大多數常見的瀏覽器工作。像鉻遊獵... – sudogetit

在這裏，我想到了這是由我自己測試的解決方案。我檢查你的菜單指南和下載源代碼，然後我在同一頁面中使用滑塊哇，但我的辦法是：

//添加以下代碼在頭頂部

的

<!-- Navigation Menu--> 
<link rel="stylesheet" href="css/main.css" type="text/css" /> 
<script type="text/javascript" src="js/jquery.js" ></script> 
<script type="text/javascript" src="js/jquery-bp.js" ></script> 
<script type="text/javascript" src="js/navigation.js" ></script> 
<!-- End Navigation -->

//並添加哇滑塊底部的腳本

<!-- Start WOWSlider.com HEAD section --> 
<link rel="stylesheet" type="text/css" href="engine1/style.css" /> 
<script type="text/javascript" src="engine1/jquery.js"></script> 
<!-- End WOWSlider.com HEAD section --> 

<script type="text/javascript" src="engine1/wowslider.js"></script> 
<script type="text/javascript" src="engine1/script.js"></script> 
<!-- End WOWSlider.com BODY section -->

現在在「導航」中做一些更改。JS'

1）寫的所有內部

(function($) { 
    $(function() { 
    // all navigation function put here 

    }); 
})(jQuery); 
// other code using $ as an alias to the other library

，而不是

$(document).ready(function(){ 

});

功能我上傳了我的代碼，你這個鏈接。請Download，讓我知道它是否適合你。對我而言，它正在使用Chrome和Firefox。

來源

2013-02-07 08:43:44

親愛的@Neeraj Singh我改變我的navigation.js與你的，我做了我的index.html的變化！鋼不適合我。但是你的演示代碼在firefox和Ghrome上工作正常！我想再檢查一次！我找到了一個半解決方案，先將新的jQuery.js放在第一位，然後放入舊的（導航jQuerty），這讓我在導航運動上有所延遲，但幾乎可以工作，滑塊運行良好，但滑塊的子彈不起作用。 – sudogetit

爲什麼必須把Wowslider jQuerty放在身體的盡頭？有什麼區別把它放在<< 的中間>>然後我的wowslider 代碼？ – sudogetit

請檢查此鏈接爲您解決問題。

Can I use multiple versions of jQuery on the same page?

來源

2013-02-05 14:39:01

解決方案似乎很簡單，但我不明白這 – sudogetit

請給我更多的細節。我只是編輯我的問題... – sudogetit

@sudogetit：請仔細閱讀此鏈接。然後你會明白，你如何在同一頁面加載兩個不同的jQuery庫。 http://api.jquery.com/jQuery.noConflict/ –

兩個不同的jquery.js文件位於同一個html文件

回答

相關問題