Внутренний JQuery для внешнего

Не мог бы кто-нибудь объяснить мне, как изменить этот внутренний js на внешний. Если есть что-то в файле, который не показывать это другой документ, но мне нужно все идентификаторы и класса, которые упоминаютсяВнутренний JQuery для внешнего

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title><?php echo $pageTitle; ?></title> 
    <meta content="text/html; charset=utf-8" http-equiv="content-type"> 

    <!-- CSS link --> 
    <link href="Content/css/tlm-styles.css" rel="stylesheet" type="text/css"> 

    <!-- Fonts --> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
</head> 
<body> 

    <header> 
     <h1><a href="tlm-home.php" title="TLM Project Management"><img src="Content/images/coloured-logo.svg" alt="TLM logo">TLM Project Management</a></h1> 
     <nav id="top-nav"> 
      <ul> 
       <li><a href="tlm-register.php" title="Register">Register</a></li> 
       <li><a href="tlm-login.php" title="Login">Login</a></li> 
      </ul> 
     </nav> 
    </header> 
    <main> 
     <nav id="sidebar"> 

      <a href="#" class="nav-toggle-btn"></a> 

      <ul> 
       <li><a href="tlm-home.php" title="Home">Home</a> 
       <li><a href="tlm-manage-projects.php" title="Manage Project">Add&nbsp;Projects</a></li> 
       <li><a href="tlm-projects.php" title="All Projects">All&nbsp;Projects</a></li> 
       <li><a href="#" title="Users">All Users</a></li> 
      </ul> 
     </nav> 
     <section class="content"> 
     </section> 
     </main> 
    <footer> 
     <section id="copy"> 
      <p>&copy; 2016 | TLM Content Management System | Tara McNeil</p> 
     </section> 
    </footer> 

    <!-- JavaScript --> 
    <script src="Scripts/tlm-scripts.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script type="text/javascript"> 

     (function() { 

      var bodyEl = $('body'), 
       navToggleBtn = bodyEl.find('.nav-toggle-btn'); 

      navToggleBtn.on('click', function(e) { 
       bodyEl.toggleClass('active-nav'); 
       e.preventDefault(); 
      }); 

     })(); 

    </script>

источник

2016-03-18 Tara McNeil

Вы имеете в виду копирование JS внутри тега 'script' здесь во внешний JS-файл n amed 'tlm-scripts.js'? это то, что вы имели ввиду? – ochi

Да, это то, что я хотел извинить. –

Не уверен, что это то, что вы хотите, но я заменит содержимое тега script с этим вызовом функции в вашем HTML

<script> 
    initToggle(); 
</script>

Затем на файл tlm-scripts.js, я бы определить функцию, что-то вроде этого:

$(document).ready(function(){ 
    /// here goes your existing code on that file 
    /// if they are related to jquery 
    //... 
    //... 

    // define function that does the toggle 
    var initToggle = function(){ 
     var bodyEl = $('body'), 
      navToggleBtn = bodyEl.find('.nav-toggle-btn'); 

     navToggleBtn.on('click', function(e) { 
      bodyEl.toggleClass('active-nav'); 
      e.preventDefault(); 
     }); 
    }; 
});

Наконец, включить свой собственный файл JS после ваших Jquery файлов

UPDATE

Если вы не хотите JS на вашей HTML странице, а затем изменить объявление функции в этом :

$(document).ready(function(){ 
    /// here goes your existing code on that file 
    /// if they are related to jquery 
    //... 
    //... 

    // define function that does the toggle 
    var initToggle = function(){ 
     var bodyEl = $('body'), 
      navToggleBtn = bodyEl.find('.nav-toggle-btn'); 

     navToggleBtn.on('click', function(e) { 
      bodyEl.toggleClass('active-nav'); 
      e.preventDefault(); 
     }); 
    }; 

    // invoke function here, not in the HTML 
    initToggle(); 
});

источник

2016-03-18 05:45:41 ochi

Я пробовал, это не работает. Я не очень хорошо разбираюсь в js и jquery. Я работаю над боковой навигационной панелью, когда при нажатии кнопки боковой навигатор будет перемещаться по странице, но мне не нужен внутренний скрипт. Но я не знаю, как получить доступ к классу и id с помощью jquery. –

@TaraMcNeil Для доступа к классу используйте этот селектор '$ ('. Classname')' <- обратите внимание на точку перед именем класса. Аналогично, для доступа к id используйте '$ ('# idname')' <- обратите внимание на '#' перед идентификатором. Возможно, загляните в JQuery API для получения всех подробностей об этом: https://api.jquery.com/ – ochi

@TaraMcNeil любая причина, по которой вы не хотите каких-либо внутренних скриптов? - вам не обязательно иметь это (обновленный мой ответ), но есть плюсы и минусы наличия некоторых сценариев JS на вашей странице – ochi

Внутренний JQuery для внешнего

ответ

Смежные вопросы