有两个主要的 JS 脚本。两者都按预期独立工作。其中一个用于菜单(目前不在 HTML 中)，另一个用于动态更改的 div(在下面的 HTML 中)。
这两个都使用 $(document).ready(function () 当我将它们放在单独的文件中时，它们不起作用。将所有函数放在同一个 $(document).ready(function () 它仍然不起作用。
如果我将它们作为两个独立的脚本放在同一个文件中，则只有顶部的脚本可以按预期工作。
有任何想法吗？我是 JS 新手，我正在努力弄清楚代码是如何布局的。
JS:
(function ($) {
"use strict";
var mainApp = {
main_fun: function () {
$('#main-menu').metisMenu();
$(window).bind("load resize", function () {
if ($(this).width() < 768) {
$('div.sidebar-collapse').addClass('collapse')
} else {
$('div.sidebar-collapse').removeClass('collapse')
}
});
},
initialization: function () {
mainApp.main_fun();
}
}
$(document).ready(function () {
mainApp.main_fun();
});
}(jQuery));
第二个 JS
$(document).ready(function(){
var $content = $('.menu-content');
function showContent(type) {
$($content).hide();
$('#'+type).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
showContent('about');
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="{{ url_for('static',filename='js/menu/custom.js') }}"></script>
<style>
div{
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
<li><a href="#cluster" class="menu-btn">cluster</a></li>
</ul>
<div id="about" class="menu-content">This is static - About</div>
<div id="contact" class="menu-content">This is static - Contact</div>
<div id="cluster" class="menu-content">cluster</div>
</body>
</html>
Expected Result - When I click on the buttons the single div should change
最佳答案
这可能是合并代码，请尝试一下:
$(document).ready(function(){
var $content = $('.menu-content');
function showContent(type) {
$($content).hide();
$('#'+type).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
showContent('about');
mainApp.main_fun();
});
(function ($) {
"use strict";
var mainApp = {
main_fun: function () {
$('#main-menu').metisMenu();
$(window).bind("load resize", function () {
if ($(this).width() < 768) {
$('div.sidebar-collapse').addClass('collapse')
} else {
$('div.sidebar-collapse').removeClass('collapse')
}
});
},
initialization: function () {
mainApp.main_fun();
}
}
} (jQuery));
关于javascript - JS 多个 $(document).ready(function() 合并问题 :，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46341033/