如何在include.js文件中包含jQuery腳本？

Question

如果這是一個簡單的問題，請原諒我。

我在我的應用程序中嵌入了一個如下所示的jQuery腳本：

   <script type='text/javascript'>//<![CDATA[
   $(function(){
   $('#div1).on('click', function () {
       $('#divTitle').show();
   });

   $('#div1').on('click', function () {
       $('#divTitle').slideUp();
   });
   });//]]>

   </script>
   <script type='text/javascript'>//<![CDATA[
   $(function(){
   $('#div2').on('click', function () {
       $('#secDiv').show();
   });

   $('#div2).on('click', function () {
       $('#secDiv).slideUp();
   });

   });//]]>

</script>

我的老板剛剛告訴我把這個jQuery放在include.js文件中。

我把文件包括在下面

function showIcon() {
            toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
            navToolbar.activate(esri.toolbars.Navigation.PAN);
            /*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {          
                if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
                    togbtn.attr("checked", true);
                }
                else
                {
                    togbtn.attr("checked", false);
                }
            });
            */      
      }


     //<![CDATA[
      $(function(){
       $('#div1).on('click', function () {
           $('#divTitle').show();
       });

       $('#div1').on('click', function () {
           $('#divTitle').slideUp();
       });
       });//]]>

      <![CDATA[
       $(function(){
       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2).on('click', function () {
           $('#secDiv).slideUp();
       });

       });//]]>

但現在它不再起作用了。

它應該顯示和隱藏某些圖標。

我究竟做錯了什么？

Answer 1

幾件事。 首先刪除<script>和CDATA標記。 它們在外部javascript文件中不是必需的（可能是由HTML中的<script>標記包含）。

其次，你需要用$(document).ready()包裝你的javascript。 您可能在當前HTML的底部（或者至少在它綁定的HTML元素之后）有這個javascript，並且由於這個外部JS文件很可能被加載到頭文件中，因此HTML元素不能綁定到。

新的include.js：

    function showIcon() {
        toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
        navToolbar.activate(esri.toolbars.Navigation.PAN);
        /*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {          
            if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
                togbtn.attr("checked", true);
            }
            else
            {
                togbtn.attr("checked", false);
            }
        });
        */      
    }

    $(document).ready(function() {

    $(function(){
       $('#div1).on('click', function () {
          $('#divTitle').show();
       });

       $('#div1').on('click', function () {
          $('#divTitle').slideUp();
       });
    });

   $(function(){
       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2).on('click', function () {
          $('#secDiv').slideUp();
       });
   });

   });

還要驗證HTML文件中是否包含以下內容：

    <script type="text/javascript" src="path/to/include.js"></script>

Answer 2

您想將Javascript包含在文件中嗎？

假設之前包含了jQuery：

HTML

<script type="text/javascript" src="path/to/include.js"></script>

include.js

   jQuery(function($){
       $('#div1').on('click', function () { //missing '
           $('#divTitle').show();
       });

       $('#div1').on('click', function () {
           $('#divTitle').slideUp();
       });


       $('#div2').on('click', function () {
           $('#secDiv').show();
       });

       $('#div2').on('click', function () { //missing ' here
           $('#secDiv').slideUp(); //missing ' here too
       });

   });

    //Edit omitted this part
    function showIcon() {
        toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
        navToolbar.activate(esri.toolbars.Navigation.PAN);    
      }