Discuz! – 嗨软 https://ihacksoft.com/archive 分享最好用的常用软件 Tue, 22 Nov 2022 02:41:09 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.26 Discuz!和jQuery冲突的解决办法 https://ihacksoft.com/archive/1278.html https://ihacksoft.com/archive/1278.html#comments Tue, 25 Jan 2011 08:14:41 +0000 https://ihacksoft.com/?p=2007 　　最新都在搞Discuz!X1.5，因为自己想做个城市网站。熟悉19楼模板的人一定注意到了，它的社区地图里，鼠标放版块上时，会出现一个框架效果，我要把它仿制下来。这个不难，其实也就是一个，js文件，直接下载19楼的然后在代码里<script>链接一下就可以了。但是问题也出来了，IE右下角提示网页错误，出错信息在\static\js\common.js，common.js是官方自带的，我没改过它，所以不可能出错，所以问题就应该是两者冲突了。导致的结果我也发现了，前台的DIY功能不能用了。

]]>
　　最新都在搞Discuz!X1.5，因为自己想做个城市网站。熟悉19楼模板的人一定注意到了，它的社区地图里，鼠标放版块上时，会出现一个框架效果，我要把它仿制下来。这个不难，其实也就是一个，js文件，直接下载19楼的然后在代码里<script>链接一下就可以了。但是问题也出来了，IE右下角提示网页错误，出错信息在\static\js\common.js：

Discuz!和jQuery冲突
 
　　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>
　　终于解决了，开心！