Javascript 在同一页面中同时使用Prototype和jQuery时出现问题

当我为内联窗口和原型使用jquery脚本来调整菜单时，会发生冲突。当我使用其中一个时，两个都工作正常。然而，当我同时使用它们时，只有原型可以工作。我读过关于jquery.noconflict的文章，但我可以正确地使用它。 这些是脚本

这是我的jquery脚本（内联窗口）

$（文档）.ready（函数（）{
//当您单击poplight类的链接时，href以a#开头
$（'a.poplight[href^=#]'）。单击（函数（）{
var popID=$（this.attr（'rel'）；//获取弹出窗口名称
var popURL=$（this.attr（'href'）；//获取Popup href以定义大小
//从href URL提取查询变量（&V）
var query=popURL.split（“？”）；
var dim=query[1]。拆分（'&'）；
var popWidth=dim[0]。拆分（'='）[1]；//获取第一个查询字符串值
//淡入弹出窗口并添加关闭按钮
$（'#'+popID）.fadeIn（）.css（{'width'：Number（popWidth）}）.prepend（''）；
//定义中心对齐的边距（垂直+水平）-我们将高度/宽度增加80，以适应css中定义的填充+边框宽度
var popMargTop=（$（'#'+popID）.height（）+80）/2；
var popMargLeft=（$（'#'+popID）.width（）+80）/2；
//将边距应用于弹出窗口
$（'#'+popID）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//淡入背景
$（'body'）.append（“”）；//将淡入淡出层添加到body标记的底部。
$（#fade'）.css（{'filter'：'alpha（不透明度=80）}）.fadeIn（）；//淡入淡入淡入层
返回false；
});
//关闭弹出窗口和淡入层
$（'a.close，#fade'）.live（'click'，function（）{//单击关闭或淡入淡出层时。。。
$（'#淡入，.popup#u块'）。淡出（函数（）{
$（“#淡入，a.close”）.remove（）；
})；//把它们都淡出
返回false；
});
});

这是我的原型脚本

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>  

<script type="text/javascript">  
// <![CDATA[  
// Making sure this code only executes when the document is loaded: this makes the DOM available to us  
Event.observe(document, 'dom:loaded', function() {  

    // for every element with an toggler class...  
    $$('.toggleExample').each(function(element) {  

        // we put on an event listener of the click type  
        Event.observe(element, 'click', function(event){   

            // We stop the default link behaviour  
            Event.stop(event);  

            // when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),   
            // and select its following sibling (next(0)), and toggle that shit.  
            Event.element(event).up(0).next(0).toggle();  

        }, false);  

    });  

});  
// ]]>  
</script>  

//   

将其放在嵌入的jquery.js之后：

<script  type="text/javascript">
$.noConflict();
</script>

到

---

首先加载jQuery，然后调用

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

然后继续加载其余内容（包括原型、自定义脚本等）

最后（这与上面的第一个示例有关）在通常使用$的地方使用函数jQuery

---

您的基本问题是，$被Prototype和jQuery用作对另一个函数的引用。不幸的是，Prototype或多或少需要它的

$

定义，这意味着一旦加载了它，就不应该给自己命名为$。jQuery的noConflict方法摆脱了$method以防止此问题。

1.-加载jQuery库。 -做你的jQuery工作 3.-加载原型库 -做你的原型

您应该在jQuery上使用noConflict函数，jQuery的内容应该这样开始：

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

jQuery.noConflict（）；
jQuery（函数（$）{
//我所有的jQuery资料
});

---

如果您需要更多信息，请查看jQuery API，如果它是我的，我会将原型菜单切换函数转换为jQuery并使用它。这是一个解决方法，但我已经构建了。如果我没有得到解决方案，维护一个库，减少冲突，减少要加载的JS代码，等等，我会努力的。。。当你这样做的时候，你会更快乐。我尝试了所有的三个答案，但都没有成功。我将使用jqueryO_o…因此，

$（文档）中的$ready

现在将由原型解释？Prototype会像预期的那样处理它吗？不会，当使用$.noConflict（）时，指向jQuery的全局变量$将被丢弃，因此$可以被另一个库使用。document.ready（）中的函数始终会提供一个参数，即jQuery本身，因此使用$上方的代码现在将成为一个局部变量。请注意编辑，有一个错误，它必须是

jQuery（document）

而不是

$（document）

啊，我看到你的编辑了。全局范围中的“$”标记必须替换为“jQuery”标记。这就是让我困惑的地方。你可以使用简化的方法来处理

jQuery（document）。ready（function（$）{

你可以使用

jQuery（function（$）{

jQuery(document).ready(function($){

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>