Question

有两个主要的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));

SECOND 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>

Current result:

Expected Result - When I click on the buttons the single div should change

Answer 1

这可能是一个合并的代码，试试这个：

$(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));

JS Multiple $（document）.ready（function（）Merging Issue：

1 个答案: