Question

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

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

jquery与视频框和自定义代码冲突

2 个答案: