jquery 与 videobox 和自定义代码冲突

Question

好的，我有一个页面使用 3 个插件和自定义代码。

1. 全屏
2. ScrollTo
3. VideoBox

我的自定义代码只是更改菜单中项目的 css 样式（我也会发布该代码）。

我的问题是 Fullscreenr 和 ScrollTo 工作正常，但是当我想添加 VideoBox 时，视频弹出窗口不想工作，它所做的只是重定向到 YouTube 页面。当我检查页面（Chrome）时，它显示此错误：

Uncaught TypeError: Object #<Object> has no method 'setProperty'

在这一行：

this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);

我尝试使用 $.noConflict();现在，如果我删除了所有其他插件，那么它就可以工作，但这对我来说不起作用，因为我需要一切都可以工作。希望有人知道我能做些什么来解决这个问题。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">  

    <!--
        // You need to specify the size of your background image here (could be done automatically by some PHP code)
        var FullscreenrOptions = {  width: 1024, height: 439, bgID: '#bgimg' };
        // This will activate the full screen background!
        jQuery.fn.fullscreenr(FullscreenrOptions);
    //-->
</script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>
<script language="javascript">

    function GotoSection(divid)
    {
        $('#realBody').scrollTo( '#' + divid, 800, {duration:3000} );
        switch(divid)
        {
            case "home":
            $("#mhome").attr('class', 'selected');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');                                                                
            break;

            case "vids":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'selected');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');                                                                
            break;

            case "eventos":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'selected');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');
            break;

            case "fotos":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'selected');
            $("#mcontact").attr('class', 'non');
            break;

            case "contact":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'selected');                                                       
            break;  
        }

    }


</script>

如果有更好的脚本我可以使用，我也欢迎任何和所有建议。

Answer 1

如果多个库在网页中使用相同的 $，这将起作用。

(function($){

//Write your jQuery code here as usual using $.

})(jQuery);

我们在这里定义了一个匿名函数，它将 jQuery 作为唯一的参数。它在上面的函数中映射到 $ 并且您的代码将按预期工作。你完全可以做这样的事情。

(function($){
    $(document).ready(function(){
        //Write your jQuery code here as usual using $.
    });
})(jQuery);

Answer 2

您必须使用 noConflict，因为您也在使用 mootools

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
  //from here you must use jQuery instead of $ or you could do

  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });


</script>