如何在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);    
      }