您现在的位置是:首页 > cms教程 > Discuz教程Discuz教程

Discuz和jQuery冲突怎么办

蔡农2025-07-02Discuz教程已有人查阅

导读Common.js是官方自带的,我没改过它,所以不可能出错,所以问题就应该是两者冲突了。导致的结果我也发现了,前台的DIY功能不能用了。

Common.js是官方自带的,我没改过它,所以不可能出错,所以问题就应该是两者冲突了。导致的结果我也发现了,前台的DIY功能不能用了。
我还花了很多时间在那里研究冲突的地方,后来还是没能解决。之后我去网上搜索“Discuz! jQuery”,果然有文章写两者冲突的事情。其实19楼那里下载下来的js就是一个jQuery,只是后面外加了一些function。解决办法有,但 我试了没用,可能是我一开始没有看懂。文章如下:
DiscuzX1.5在static/js/common.js中的某一行的内容如下:
function $(id) {
return !id ? null : document.getElementById(id);
}
表示这$(id)用于获取id为(id)的对象(这个说法好像不太科学)。$的用法和jQuery中的用法发生了严重的冲突。众所周知,jquery强 大的标签选择器用的就是$来获取,这样一来就与discuz x1.5发生了严重的冲突。尝试在discuz x1.5的广场加入infinite Carousel功能的时候遇到了jquery的冲突问题。无法自动滚动。无法显示非常漂亮的图片滚动展示(悲剧)。
解决方法如下:
主要是Discuz X1.5使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突,一个是优秀的社区系统,一个是出色的js框架,自然希望做到兼容。
解决方法1:修改/template/default/common/header_common.htm,在第16行代码<!-{csstemplate}->
之后增加以下代码:
<script src=”{$_G[setting][jspath]}jquery-1.4.min.js?{VERHASH}" type="text/javascript"></script>
之后用到jQuery的$的地方用jQuery代替。
解决方法2:修改/template/default/common/header.htm,在第20行代码</head>之前增加以下代 码:
<script src="{$_G[setting][jspath]}jquery-1.4.min.js?{VERHASH}" type="text/javascript"></script><script type="text/javascript">jQuery.noConflict();</script>
之后用到jQuery的$的地方用jQuery代替。
注:修改完成后请记得更新一下系统模板缓存才能看到效果,手动删除/data/template/下的所有文件,或在系统管理的工具>更新缓存中更新模板缓存。
上面的我不多介绍了,我自己后来解决了。其实$()函数的冲突,jQuery中给出了解决方法:jQuery.noConflict(),把美元让给你(看看人家多大肚)。
那么我们的jQuery代码可以这样写了:
var jq = jQuery.noConflict(); //把$让给第一个实现它的库,用jq代替
jq(function()
{
//**********************
}
);
这样就完美解决了两者的冲突!!
我下载了一个jQuery v1.4.2更名为ditu.js放在JS目录下,然后打开它在后面添加代码:
var jq = jQuery.noConflict();
jq(function()
{
jq(".citymap_huisuo dd").hover(function(){jq(this).addClass("div_hover");},function(){jq(this).removeClass("div_hover");});
jq(".city_tips_active dt").click(function(){
jq(".city_tips_active dd").hide();
jq(".city_tips_active strong").removeClass("strong_active");
jq(this).parent("dl").find("dd").show();
jq(this).find("strong").addClass("strong_active");
});
}
);
然后在代码里引用下就好:
<script type="text/javascript" src="{$_G[setting][jspath]}ditu.js?{VERHASH}"></script>
终于解决了,开心!

本文标签:

很赞哦! ()

相关源码

  • (自适应响应式)html5高档服装定制西服pbootcms模板下载本模板基于PbootCMS内核开发,为服装定制企业和服装品牌量身打造。设计风格时尚现代,充分展现服装行业的审美特质与品牌魅力。采用HTML5响应式技术,确保在各种设备上呈现视觉效果。整站布局注重产品展示与品牌叙事,帮助企业有效展示服装系列与定制服务,提升客户体验。查看源码
  • (自适应响应式)化妆美容口红唇膏化妆品模板pbootcms源码下载基于PbootCMS开发的响应式模板,为化妆品品牌、美容机构打造,通过优雅的视觉呈现提升产品展示效果与品牌调性。采用时尚杂志排版风格,色卡系统规范产品展示。微交互动画增强用户体验,智能推荐算法提升产品关联展示效果。查看源码
  • (自适应)工商代理公司注册财务会计pbootcms模板免费下载为工商代理、财务会计服务企业设计的网站模板,基于PbootCMS开发,充分考虑了企业服务行业的展示需求与客户转化路径。设计风格专业严谨,布局清晰合理,呈现企业服务内容与专业优势。查看源码
  • (自适应)绿色LED灯具照明灯饰灯光灯泡pbootcms网站源码下载本模板基于PbootCMS内核开发,为LED照明、灯具制造及相关光电技术企业量身打造。设计充分考虑了照明行业的展示需求,从产品陈列到技术说明,从光源展示到工程案例,每一个细节都体现出专业照明行业的特点。查看源码
  • (自适应)WordPress主题SEO自媒体博客资讯模板RabbitV2.0Rabbit v2.0主题专注于网站搜索引擎优化需求,为博客、自媒体及资讯类网站提供专业的SEO技术解决方案。该主题从架构设计到功能实现均围绕搜索引擎优化理念展开。查看源码
  • (PC+WAP)红色户外岗亭钢结构岗亭pbootcms网站模板为钢结构岗亭、户外设施企业打造的高端响应式营销门户,基于PbootCMS开源内核深度开发,采用HTML5自适应架构,实现PC与移动端数据实时同步展示。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐