JS Multiple $（document）.ready（function（））マージ問題：

2つのメインのJSスクリプトがあります。どちらも期待どおりのWORKです。その1つはメニュー用です）divを動的に変更する（HTMLの下で）両方とも使用$(document).ready(function()別々のファイルに入れても機能しません。同じ機能をすべて同じにしてください$(document).ready(function()まだ動作しません。 If 私はJSを初めて使っているので、コードをどのようにレイアウトするかについて頭を悩ましているのですが、私はそれらを2つの独立したスクリプトとして同じファイルに入れます。

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

出典

2017-09-21 Macbook

あなたが正確に動作しないかを指定する必要があります。 – 31piy

複数のドキュメント・レディ・ハンドラが問題を引き起こす原因となる本質的な理由はありません。この問題は、クロススクリプトの依存関係または実行順序の可能性が高くなります。何がうまくいかないか教えてください - 例えばコンソールのエラー？そうでなければ、それはかなり曖昧な声明です。 – Utkanos

編集を参照してください、コンソールにエラーはありません。 – Macbook

これは、マージされたコードである可能性があり、これを試してみる：

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

出典

2017-09-21 10:19:11

@sid、私はこの答えが問題を解決したことを願っています。 –

「Second JS」はこのコードで期待どおりに動作しています。しかし、 'First JS'はもう機能していないので、メニューは期待どおりにポピュレートされません。それは 'mainApp.main_fun（）;'のようになります。実行されていません。これらのコンポーネントは個別に動作します。 – Macbook

@Sid、私は今更新しました。 –

JS Multiple $（document）.ready（function（））マージ問題：

答えて

関連する問題