• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 如何解决jQuery与JS及其它JS库的冲突?

    如何解决jQuery与JS及其它JS库的冲突?

    作者: 分类:JS应用 点击: 1,634 次
    wordpress CMS主题:ssmay主题

      最近在做公司网站时碰到一个JS冲突问题,公司网站的右侧要添加一个右挂商务通和微信,即点击微信图片时,会在页面的中间弹窗微信二维码。我就用jQuery写了一个简单代码。在本地普通网页上能正常使用,可是一上传到网站上,就出现问题,点击微信二维码时,没有弹窗。直觉告诉我,可能是JS冲突问题。于是,我就把页面上的所有的JS文件一个一个地试着禁用,最终找到原因——幻灯片文件是用纯JS写的,并且这个纯JS文件代码中还定义了一个 $变量,这就与jQuery的全局变量$发生了冲突

      原网站的幻灯片JS代码比较多,所以,我无意思去修改它的代码,所以,只好从我自己写的这个右挂代码下手了。解决方法如下:

      方法一:直接在jQuery文件中使用jQuery ,而不使用$。

      jQuery(function(){
      jQuery(".sideBar ul li").eq(2).click(function(){
      //$("#webxin").click(function(){
      jQuery(".ewmLayer").show();
      });
      jQuery(".close").click(function(){
      jQuery(".ewmLayer").hide();
      });
      });

      方法二:使用jQuery 自带的noConflict() 方法让出变量 $ 的 jQuery 控制权。

      var $q = jQuery.noConflict();
      $q(function(){
      $q(".sideBar ul li").eq(2).click(function(){
      //$("#webxin").click(function(){
      $q(".ewmLayer").show();
      });
      $q(".close").click(function(){
      $q(".ewmLayer").hide();
      });
      });

      通过以上2种方法,都可以解决我的这个JS冲突问题。如果是多个不同的JS库与jQuery发生冲突,也可以使用这2种方法来解决。问题就总结到这里。

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201510104856.html
    本文时间:2015-10-10 11:06:25
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.