wordpress CMS主题 微信
Home > JS应用 > 如何解决jQuery与JS及其它JS库的冲突?

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

高时银博客 JS应用 点击: 1,017 次 0 0
  • 标签:
  • 最近在做公司网站时碰到一个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
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论