如何让这两个jQuery脚本一起工作?

How can I get these two jQuery scripts to work together?

本文关键字：jQuery 两个 脚本 一起 工作      更新时间：2023-09-26

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

标题:

<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>

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)

你可以把jQuery代码隔离在一个自动执行的函数中，传递jQuery对象作为参数。所以$表示在jQuery范围内但是在它之外可以是别的东西

(function ($) {
    // your jQuery code here
}(jQuery));

也传递对象窗口以避免解析全局作用域，并且接收窗口和未定义是非常常见的。因为你只传递2个参数，第三个必须是未定义的，这提高了代码的可压缩性，使更稳定(未定义的可以不幸地重新定义)

(function ($, window, undefined) {
    // your jQuery code here
}(jQuery, window));
相关文章：