如何将jQuery脚本包含到include.js文件中

how do I include a jQuery script into an include.js file?

本文关键字：include js 文件包含 jQuery 脚本更新时间：2023-09-26

如果这是一个简单的问题，请原谅我。

我的应用程序中嵌入了如下所示的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();
       });
       });//]]>

但现在它已经不起作用了。

它应该显示和隐藏某些图标。

我做错了什么？

有几件事。首先丢弃<script>和CDATA标签。它们在外部javascript文件中是不必要的（可能包含在HTML中的<script>标记中）。

其次，您需要用$(document).ready()包装您的javascript。您可能在当前HTML的底部（或者至少在它绑定到的HTML元素之后）有这个javascript，并且由于这个外部JS文件可能加载在头中，所以HTML元素不在那里可以绑定。

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

您想在文件中包含您的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);    
      }