Как перенести внутренний HTML-скрипт на отдельный Javascript?

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> 

Я понимаю, что это совершенно излишним, но я новичок, и я все еще учусь. То, что я пытаюсь сделать, это переместить этот код на мобильный/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 - для каждой ссылки Hover для анимации фонового изображения.

Я был бы очень признателен, если бы кто-то помог мне с этим, поскольку мне это нужно 4 января, пока мои учителя не будут доступны.

Еще раз спасибо и счастливого кодирования

Answer 1

Ok Я собираюсь помочь вам лучшее, что я могу с вне делать всю работу за вас.

Для начала вам понадобится только одна функция готовности документа для вашего скрипта.

Так что возьмите весь код JavaScript внутри функций готовности документа и поместите его внутри одной готовой документации.

Как только вы сделаете эту ссылку на файл JavaScript, используя тег скрипта непосредственно перед вашим закрывающим тегом </body> в вашем html-файле.

Пример (ссылка на внешний JavaScript файл):

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

Примечание: HTML-код ниже, предполагается, что ваш HTML-файл находится в том же каталоге, что и JavaScript.

Пример (внешний JavaScript File Content):

$(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) поможет устранить неполадки.

1. Вы используете глобальные переменные для своих TriggerClick2 и TriggerClick для одной переменной. Прикрепите их с помощью ключевого слова var и поместите их в начало скрипта внутри функции готовности документа.

2. Вы должны попробовать и привыкнуть использовать === вместо ==. Использование === оценивает точно равное (соответствует значению и типу), где == соответствует значению. Поэтому, если вы хотите, чтобы ваши совпадения имели значение и тип переменной (например, число и строка), используйте ===, чтобы предотвратить возможные потенциальные головные боли в будущем.

Пример:

var TriggerClick2 = 0; 

var TriggerClick = 0; 

Имейте в виду, что переменные контекстными на уровне функций в JavaScript.Таким образом, любая переменная, объявленная внутри функции, не может быть доступна за пределами функции, объявленной ею, если только она не возвращается вызываемой функцией, которая возвращает это значение переменной.