document.ready可用于具有单个JavaScript文件的多个表单

document.ready可用于具有单个JavaScript文件的多个表单,javascript,jquery,html,Javascript,Jquery,Html,我在HTML页面上引用JavaScript,如下所示: <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> </script> <script type="text/javascript" src="js/application.js"></script> <script type="text/j

我在HTML页面上引用JavaScript,如下所示:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>    
</script>
<script type="text/javascript" src="js/application.js"></script>
<script type="text/javascript">
$('document').ready(function() {   
// call some function specific to this page 
alert("this alert will only show for this particuar page");
});
</script>

$('document').ready(函数(){
//调用特定于此页面的某些函数
警报(“此警报仅针对此特定页面显示”);
});
我的问题是,我有很多函数,特别是bootstrap/jquery插件函数可以放在document.ready()中。因此,我的所有html页面中都有大量javascript代码。如何将需要在document.ready中执行的所有函数移植到shared file application.js?我知道我可以在application.js中编写一个巨大的document.ready,它包含所有html文件的dom就绪函数。还有更好的选择吗?谢谢你的帮助

编辑:


对不起,我不清楚。我的意思是:如果有两个html页面:html1,html2,我如何告诉我的共享JavaScript文件为html1而不是为html2执行document.ready函数。如果我理解正确,document.ready中的所有函数将在每次加载页面时执行


与我的情况类似

您可以使用“脚本延迟”属性,它将使您的所有脚本在使用html渲染器后加载。因此,将所有脚本放在DocumentReady下就相当了。以下是链接:


最好的办法是将所有的JS移到application.JS,让它知道它在哪个页面上

最简单的解决方案是查看当前页面的URL:

// jQuery
$(document).ready(function() {  
    if(document.location.pathname.matches(/your-page\.html/)) {
          // do someting
    }
});
但一个更优雅和可重用的解决方案是寻找您想要与之交互的特定元素:

// jQuery
$(document).ready(function() {  
    var someSpecialElement = $('#some-special-element');
    if (someSpecialElement.length) {
          // do someting
    } 
    var someOtherSpecialElement = $('#some-other-special-element');
    if (someOtherSpecialElement.length) {
          // do someting
    } 
});
或者

您可以将类放在body标记上,并在加载HTML后进行测试

// jQuery
$(document).ready(function() {  
    var body = $('body');
    if (body.hasClass('edit-some-stuff')) {
          // do someting
    } 
    if (body.hasClass('delete-some-stuff')) {
          // do someting
    } 
});
或者

// Shiny Javascript
(function(){
    const body = document.querySelector('body');
    if (body.classList.contains('edit-some-stuff')) {
          // do someting
    } 
    if (body.classList.contains('delete-some-stuff')) {
          // do someting
    } 
})();

嗯,您可以在外部JS文件中调用document.ready,并且可以有多个ready调用。问题是什么?您应该删除所有
文档。就绪
包装,将代码移动到
application.js
并在关闭
标记之前放置此脚本。如果我不清楚,请检查。我的意思是:如果有两个html页面:html1,html2,我如何告诉我的共享javascript文件为html1而不是为html2执行document.ready函数。如果我理解正确,document.ready中的所有函数将在每次加载页面时执行。仅供参考,没有
document
dom节点,
document
是一个窗口对象:
$(document.ready(…)偶数
$().ready(…)可以工作,但并不总是可靠的
$('document')
应该是
$(document)
// Shiny Javascript
(function(){
    const body = document.querySelector('body');
    if (body.classList.contains('edit-some-stuff')) {
          // do someting
    } 
    if (body.classList.contains('delete-some-stuff')) {
          // do someting
    } 
})();