Discuz默认JS和其他JS冲突的解决方案

最新推荐文章于 2021-06-20 06:58:49 发布

转载最新推荐文章于 2021-06-20 06:58:49 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008901640

文章标签：

#php #javascript #ViewUI

本文介绍了一种解决网页中多个jQuery实例冲突的问题，通过使用`jQuery.noConflict()`方法，并将选择器从`$`更改为`jq`来避免冲突。同时提供了一个具体的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

找到冲突的JS
如：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

在下面添加：

<script type="text/javascript"> var jq = jQuery.noConflict(); </script>

然后把用到该JS中"$"全部换成"jq"

例子：

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> //文件内的$全部替换为jq
    <script type="text/javascript"> var jq = jQuery.noConflict(); </script>
    <style type="text/css">
    /* suspend */
    .suspend{width:40px;height:198px;position:fixed;top:200px;right:0;overflow:hidden;z-index:9999;}
    .suspend dl{width:120px;height:198px;border-radius:25px 0 0 25px;padding-left:40px;box-shadow:0 0 5px #e4e8ec;}
    .suspend dl dt{width:40px;height:198px;background:url(img/suspend.png);position:absolute;top:0;left:0;cursor:pointer;}
    .suspend dl dd.suspendQQ{width:120px;height:85px;background:#ffffff;}
    .suspend dl dd.suspendQQ a{width:120px;height:85px;display:block;background:url(img/suspend.png) -40px 0;overflow:hidden;}
    .suspend dl dd.suspendTel{width:120px;height:112px;background:#ffffff;border-top:1px solid #e4e8ec;}
    .suspend dl dd.suspendTel a{width:120px;height:112px;display:block;background:url(img/suspend.png) -40px -86px;overflow:hidden;}
    * html .suspend{position:absolute;left:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop+200))}
    </style>
    <div class="suspend">
        <dl>
            <dt class="IE6PNG"></dt>
            <dd class="suspendQQ"><a href="#" target="_blank"></a></dd>
            <dd class="suspendTel"><a href="javascript:void(0);"></a></dd>
        </dl>
    </div>
   
    <script type="text/javascript">          
    jq(document).ready(function(){
   
         jq(".suspend").mouseover(function() {
            jq(this).stop();
            jq(this).animate({width: 160}, 400);
        })
       
        jq(".suspend").mouseout(function() {
            jq(this).stop();
            jq(this).animate({width: 40}, 400);
        });
       
    });
    </script>