2012-07-17 85 views
1

我在我的HTML文件中有两个$(document).ready(function($)函数。现在因为有两个ready()函数,只有一个执行!由于我对jQuery没有太多的想法,所以我无法将它们合并。在jQuery中合并两个ready()函数

<script type="text/javascript"> 

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

     $('#mega-1').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'fast', 
      effect: 'show', 
      direction: 'right' 
     }); 
     $('#mega-2').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'slow', 
      effect: 'fade', 
      direction: 'left' 
     }); 
     $('#mega-3').dcVerticalMegaMenu({ 
      rowItems: '4', 
      speed: 'slow', 
      effect: 'slide', 
      direction: 'right' 
     }); 
     $('#mega-4').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'fast', 
      effect: 'slide', 
      direction: 'left' 
     }); 

    }); 
    </script> 

jQuery的功能2:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
    }); 
</script> 
+0

刚刚从第二就绪()函数的第一个添加语句。 – 2012-07-17 11:24:43

+0

JS是否必须内联?你可以将它移动到一个外部JS文件并引用它? – nitsua 2012-07-17 11:25:01

+5

有些事情是错误的,因为所有准备就绪的函数都应该触发......我已经在整个地方使用了大量文档准备好的函数而没有问题。 – 2012-07-17 11:25:14

回答

1
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Page Title</title> 

<script src="some_javascript_file.js"></script> 
<script src="another_js_file.js"></script> 

</head> 
<body> 

<!-- HTML HERE --> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="jQuery_plugin_1.js"></script> 
<script src="jQuery_plugin_2.js"></script> 
<script> 
(function($){ // remap $ to jQuery 

    $(function(){ 
     $('#mega-1').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'fast', 
      effect: 'show', 
      direction: 'right' 
     }); 
     $('#mega-2').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'slow', 
      effect: 'fade', 
      direction: 'left' 
     }); 
     $('#mega-3').dcVerticalMegaMenu({ 
      rowItems: '4', 
      speed: 'slow', 
      effect: 'slide', 
      direction: 'right' 
     }); 
     $('#mega-4').dcVerticalMegaMenu({ 
      rowItems: '3', 
      speed: 'fast', 
      effect: 'slide', 
      direction: 'left' 
     }); 


     // ===================================== 

     $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 

    }); 

})(jQuery); 
</script> 

</body> 
</html>