同一网页中,两个JS冲突

JavaScript09

同一网页中,两个JS冲突,第1张

冲突的原因:第一个中$被定义为jquery的对象了,而你第二个中有再次定义这样的全局变量,变量冲突了,解决的方法有两个:

第一种,把你的第二个改成(推荐方法):

<script

type="text/javascript">

$(function

()

{

$("#nav").next().click(function(){

$(this).toggle()

})

})

</script>

第二种,把你的第二个改成(不推荐):

<script

type="text/javascript">

function

$$(id){return

document.getElementById(id)}//注意改成$$

window.onload

=

function(){

$$("nav").onclick

=

function(e){

var

src

=

e?e.target:event.srcElement

if(src.tagName

==

"H3"){

var

next

=

src.nextElementSibling

||

src.nextSibling

next.style.display

=

(next.style.display

=="block")?"none":"block"

}

}

}

</script>

有什么不明白的可以继续追问我。

很简单,把冲突的部分改了。

1.对象名不要重复。

2.调用页ID不要重复。

3.最容易出问题的部分在这:onload事件。

如果两个JS内都出现onload事件,那就会冲突。

你可用“查找”Ctrl+F键,找出所有的onload事件并且把onload事件调用的函数名或执行代码放到一起。

如:

第一种

window.onload=wgbf_moveit

第二种

window.onload=function(){

执行代码。。。。。

}

=================================

上面常见的onload事件使用方法。

你可以把onload事件写在一起。如下:

window.onload=function(){

wgbf_moveit//第一种:函数名

执行代码。。。。。//第二种:执行代码

}

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,主要解决办法如下:

方法一:

<script type="text/javascript">jQuery.noConflict() //将变量$的控制权让渡给prototype.jsjQuery(function(){ //使用jQueryjQuery("p").click(function(){

alert( jQuery(this).text() )

})

})

$("pp").style.display = 'none' //使用prototype</script>

方法二:

<script type="text/javascript">var $j = jQuery.noConflict() //自定义一个比较短快捷方式$j(function(){ //使用jQuery$j("p").click(function(){

alert( $j(this).text() )

})

})

$("pp").style.display = 'none' //使用prototype</script>

方法三:

<script type="text/javascript">jQuery.noConflict() //将变量$的控制权让渡给prototype.js(function($){ //定义匿名函数并设置形参为$$(function(){ //匿名函数内部的$均为jQuery$("p").click(function(){ //继续使用 $ 方法alert($(this).text())

})

})

})(jQuery) //执行匿名函数且传递实参jQuery$("pp").style.display = 'none' //使用prototype</script>