2012-02-05 72 views
0

我打算使用多個jQuery腳本來做不同的事情。該網站已無法正常工作。我可以使用代碼中所示的動態加載器或內容滑塊。我知道它與jquery-1.6.2.min.js和其他.min.js文件有關。我怎樣才能使這兩個腳本工作?多個JQuery腳本

<!DOCTYPE html> 
<html> 

<head> 
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 

<title>Dynamic Page | Home</title> 

<link rel='stylesheet' type='text/css' href='../css/style.css' /> 


<!--DYNAMIC LOADER--> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> 
<script type='text/javascript' src='../js/jquery.ba-hashchange.min.js'></script> 
<script type='text/javascript' src='../js/dynamicpage.js'></script> 

<!--CONTENT SLIDER--> 
<link rel="stylesheet" href="../css/basic-jquery-slider.css"> 
<script src="../js/jquery-1.6.2.min.js"></script> 
<script src="../js/basic-jquery-slider.js"></script> 


<!--CONTENT SLIDER--> 
<script> 
    $(document).ready(function() { 

    $('#banner').bjqs({ 
     'animation' : 'slide', 
     'width' : 940, 
     'height' : 403 
    }); 

    }); 
</script> 

<style> 
.container { 
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto; 
background-image:url(../images/screen.png); 
font-family: Helvetica, sans-serif; 
} 
</style> 
</head> 

<body> 
<div class="container"> 

<div id="page-wrap"> 


     <nav> 

      <ul class="group"> 
      <img src="../../Website/images/logo.png"> 
       <li><div id="home"><a href="index.html"><img src="../images/menu-home.png"></div></a></li> 
       <li><div id="about"><a href="about.html"><img src="../images/menu-about.png"></div></a></li> 
       <li><div id="gallery"><a href="contact.html"><img src="../images/menu-gallery.png"></div></a></li> 
       <li><div id="affiliates"><a href="#l"><img src="../images/menu-affiliates.png"></div></a></li> 
       <li><div id="biography"><a href="#"><img src="../images/menu-bio.png"></div></a></li> 
       <li><div id="contact"><a href="#"><img src="../images/menu-contact.png"></div></a></li> 
      </ul> 
     </nav> 


    <section id="main-content"> 
    <div id="guts"> 



    <div id="container"> 

    <div id="banner"> 
    <ul class="bjqs"> 
     <li><img src="../images/banner02.jpg" title="Cool Skull"></li> 
     <li><img src="../images/banner04.jpg" title="Women1"></li> 
     <li><img src="../images/banner01.jpg" title="Kid With Shell"></li> 
     <li><img src="../images/banner03.jpg" title="Women2"></li> 
    </ul> 
    </div> 
</div> 

    </div> 
    </section> 

</div> 

</div> 
</body> 

</html> 
+0

您可以請發佈您的瀏覽器正在拋出什麼錯誤?如果您使用的是Firefox,請點擊「Ctrl + Shift + J」打開錯誤控制檯。 此外,從上面的代碼,我沒有看到兩個插件被調用。你是否正在調用「dynamicpage.js」文件中的其他插件? – Vikas 2012-02-05 06:15:08

+0

@Vikas我有一個腳本,當點擊鏈接時會在頁面內容中淡出,而另一個腳本則是用於圖像滑塊。如果我拿出jquery-1.6.2.min.js行內容推子將工作正常,但如果我拿出1.4/jquery.min.js滑塊將罰款,但不是推子 – user1165861 2012-02-05 06:19:16

+0

您使用兩個jQuery 1.6 .2和jQuery 1.4? – 2012-02-05 06:26:49

回答

0

哦!我看到你在同一頁面上使用多個版本的jquery。這是一個衝突肯定會發生。在這裏,嘗試這個鏈接。

http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

它可能會解決你的問題。

+0

所以我得到這個,是添加這個? user1165861 2012-02-05 06:29:39

+0

是的。請按照該鏈接中的說明進行操作。它可能會解決你的問題。 – Vikas 2012-02-05 06:33:01

+0

我是否必須更改1.6.2.min.js中的所有$?!? – user1165861 2012-02-05 06:44:46

1

我認爲這裏沒有很好的解決辦法,而是兩個選項:

  1. 解決您的舊代碼中的任何不兼容對最新版本的jQuery
  2. 修改當前的代碼運行,因此,它的兼容如果選項1不可行,則使用jQuery的以前版本。

我建議這樣做是因爲爲了支持jQuery的兩個版本,您仍需要更新一個腳本或另一個腳本,以通過$ jq(或其他)引用jQuery而不是標準$。如果您要以這種方式更新一個代碼庫或另一個代碼庫,使用這段時間來簡單解決不兼容問題並支持單個版本的jquery會更有效。有很多原因,但最重要的是:

  • 對同一框架的兩個引用可能會混淆項目中的其他開發人員。
  • 性能受阻,因爲頁面現在必須要求框架兩次。
  • 沒有多少時間保存,因爲您仍然需要更新代碼庫以不同的方式引用單獨版本的jQuery。
  • 插件和事件處理程序仍然存在衝突或問題。

花時間解決問題以支持一個框架與花費時間來支持同一框架的兩個實例將增加您的項目的穩定性並使其更容易支持。

+0

+1通過僅包含jquery的一個版本(最好是最近的版本) – xec 2012-02-05 14:56:08