Question

所以我试图清理我的代码，目前以下脚本都在我的HTML标题中

<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        TriggerClick2 = 0;
        $("#hamburger").click(function(){
            if(TriggerClick2==0){
                 TriggerClick2=1;
                 $("#navi").animate({width:'35%'}, 1000);
            }else{
                 TriggerClick2=0;
                 $("#navi").animate({width:'0%'}, 1000);
            };
          });
        }); 
</script>
<script type="text/javascript">
    $(document).ready(function(){
        TriggerClick = 0;
        $("#hamburger").click(function(){
            if(TriggerClick==0){
                 TriggerClick=1;
                 $(".content").animate({width:'65%'}, 1000);
            }else{
                 TriggerClick=0;
                 $(".content").animate({width:'100%'}, 1000);
            };
          });
        }); 
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".stayThere").mouseenter(function() {
            $('.moveThere').animate({'margin-left': '0%'}, 1000);
              }).mouseout(function() {
              $('.moveThere').animate({'margin-left': '-100%'}, 1000);
              });
            });
</script>

我明白这是多余的，但我是初学者，现在还在学习。我尝试做的是将此代码移动到代码最顶端链接的mobile / js。

我现在在mobile.js中的内容如下所示

//initializes each function.
function init() {
    hideMenu();
    scaleContent();
    linkAnim1();
    linkAnim2();
    linkAnim3();
    linkAnim4();
    linkAnim5();
}

function hideMenu(){
    TriggerClick2 = 0;
    document.getElementById("hamburger").click(function(){
        if(TriggerClick2==0){
            TriggerClick2=1;
            document.getElementById("navi").animate({width:'35%'}, 1000);
        }else{
            TriggerClick2=0;
            document.getElementById("navi").animate({width:'0%'}, 1000);
        };
    });
};  

function scaleContent(){
    TriggerClick = 0;
    document.getElementById("hamburger").click(function(){
        if(TriggerClick==0){
            TriggerClick=1;
            document.getElementsByClassName("content").animate({width:'65%'}, 1000);
        }else{
            TriggerClick=0;
            document.getElementsByClassName("content").animate({width:'100%'}, 1000);
        };
    });
 }; 

 function linkAnim1(){
    document.getElementsByClassName("stayThere").mouseenter(function() {
        document.getElementsByClassName('moveThere').animate({'margin-left': '0%'}, 1000);
             }).mouseout(function() {
                 document.getElementsByClassName('moveThere').animate({'margin-left': '-100%'}, 1000);
        });
};

//initializes the js functions above
window.onload = init;

遗憾的是，当我将它从html文档中评论出来时，它完全停止了做任何事情。为了解释这些功能，前两个用于移动，在调整内容大小时引入导航，另外5个用于每个链接悬停以设置背景图像的动画。

我真的很感激，如果有人可以帮我解决这个问题，因为我需要在1月4日这样做，直到我的老师不在。

再次感谢并快乐编码

Answer 1

好的，我会尽我所能帮助你完成所有的工作。

首先，您只需要为脚本启用一个文档就绪功能。

因此，将文档就绪函数中的所有JavaScript代码放在单个文档就绪函数中。

在html文件中关闭</body>标记之前使用脚本标记链接到JavaScript文件。

示例（链接到外部JavaScript文件）：

<script src="myjavascriptfile.js"></script>

注意：下面的html代码假定您的html文件与JavaScript位于同一目录中。

示例（外部JavaScript文件内容）：

$(document).ready(function(){//begin document closure


        TriggerClick2 = 0;
        $("#hamburger").click(function(){
            if(TriggerClick2==0){
                 TriggerClick2=1;
                 $("#navi").animate({width:'35%'}, 1000);
            }else{
                 TriggerClick2=0;
                 $("#navi").animate({width:'0%'}, 1000);
            };
          });


TriggerClick = 0;
        $("#hamburger").click(function(){
            if(TriggerClick==0){
                 TriggerClick=1;
                 $(".content").animate({width:'65%'}, 1000);
            }else{
                 TriggerClick=0;
                 $(".content").animate({width:'100%'}, 1000);
            };
          });

$(".stayThere").mouseenter(function() {
            $('.moveThere').animate({'margin-left': '0%'}, 1000);
              }).mouseout(function() {
              $('.moveThere').animate({'margin-left': '-100%'}, 1000);
              });

});//end document closure

现在有人说，你的代码可能会出现很多问题。发布标记（HTML）有助于排除故障。

您正在为TriggerClick2使用全局变量，并且TriggerClick一个变量。使用var关键字对它们进行前缀，并将它们放在文档就绪函数内部的脚本顶部。
你应该尝试使用===代替==。使用===计算到完全等于（匹配值和类型），其中==匹配值。因此，如果您想确保匹配值和变量类型（例如数字和字符串），那么使用===来防止将来出现任何潜在的麻烦。

示例：

var TriggerClick2 = 0;

var TriggerClick = 0;

请记住，变量的范围是JavaScript中的函数级别。因此，在函数内部声明的任何变量都不能在声明的函数之外访问，除非它通过调用返回该变量值的函数返回。

如何将内部HTML脚本移动到单独的Javascript？

1 个答案: