javascript - 我怎样才能让这两个 jQuery 脚本一起工作？

Question

这个问题已经有答案了:

JQuery Slideshow and MooTools Conflict (2 个回答)

已关闭 10 年前。

一个是 Mp3 的音频播放器，另一个是我试图在其中显示 YouTube 视频的灯箱。

这是头部:

<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />

<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
   $(function(){
            $("#ubaPlayer").ubaPlayer({
            codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
            });
        });
</script>

我注意到，当我删除“libs/jquery/jquery.js”时，灯箱可以工作，但随后我的音频播放器停止工作。

我对 Javascript/JQuery 不是很熟练，所以答案可能是显而易见的。

更新:

这解决了问题!

<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />

<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
   jQuery.noConflict();
   jQuery(function(){
            jQuery("#ubaPlayer").ubaPlayer({
            codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
            });
        });
</script>

Answer 1

MooTools 和 jQuery 都使用 $ 变量，这意味着您不能同时使用它们。 2个解决方案:

1. 搜索这两个功能的 jQuery/MooTools 实现，我相信您会找到它们。
2. 使用jQuery.noConflict让 MooTools 使用 $ 变量。

3. 使用 jQuery 变量代替 $ 并在 jQuery 后添加 MooTools。如果您想使用 jQuery 的 $ 快捷方式，请将 jQuery 代码包装在 domready 事件中，并使用 $ 作为回调参数:

   jQuery(function($) {
       // ... jQuery code ($ has a copy of `jQuery` now)
   });
   // ... MooTools code ($ has a reference to the `MooTools.id` method now)