2012-02-05 40 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