JQuery записанный в отдельном файле не будет применяться в HTML файле - PullRequest
Новая
       0

JQuery записанный в отдельном файле не будет применяться в HTML файле

0 голосов
/ 10 апреля 2020

Я знаю, что есть подобные проблемы, как у меня, но я пробовал разные решения (по крайней мере, я думаю), и ничего не работает. Поэтому я написал код JQuery в файле JS, но когда я указал путь для js и версию jq в файле HTML, он просто не работает ни в одном из моих веб-браузеров, но когда я поместил код JQuery прямой в HTML это работает. Я много раз проверял код, искал ошибки при наборе, но ничего не нашел. Может быть, я не видел ничего очевидного, поэтому, пожалуйста, скажите Это мой первый раз с этим, так что ... Спасибо 

$(document).ready(function() {
  $(".collapse-control").click(function() {
    $(".collapse-box").slideUp();
    $(this).closest(".collapse").find(".collapse-box").slideDown();
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Lesson</title>

  <meta name="viewport" content="width=vice-width, initial-scale=1">
  <meta name="author" content="Unknown">
  <meta name="description" content="description">
  <meta name="keywords" content="web,html,css,html5,development">

  <script src="js/script.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</head>


<body>

  <div class="collapse">

    <h2 class="collapse-control">Open box 1</h2>

    <div class="collapse-box">
      This is box 1
    </div>

  </div>

</body>

</html>

Ответы [ 3 ]

1 голос
/ 10 апреля 2020

Попробуйте использовать: 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/script.js"></script>

Insted of: 

<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Надеюсь, это поможет.

1 голос
/ 10 апреля 2020

Не имеет смысла включать jQuery после включения скрипта.
Вы должны включить свой скрипт после включения jQuery.

Так что ваш код будет выглядеть так: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Lesson</title>
  <meta name="viewport" content="width=vice-width, initial-scale=1">
  <meta name="author" content="Unknown">
  <meta name="description" content="description">
  <meta name="keywords" content="web,html,css,html5,development">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="collapse">
    <h2 class="collapse-control">Open box 1</h2>
    <div class="collapse-box">
      This is box 1
    </div>
  </div>
</body>
</html>
1 голос
/ 10 апреля 2020

Ваш файл script.js должен вызываться после вызова библиотеки jquery в вашем файле html. 

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/script.js"></script>


$(document).ready(function() {
  $(".collapse-control").click(function() {
    $(".collapse-box").slideUp();
    $(this).closest(".collapse").find(".collapse-box").slideDown();
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Lesson</title>

  <meta name="viewport" content="width=vice-width, initial-scale=1">
  <meta name="author" content="Unknown">
  <meta name="description" content="description">
  <meta name="keywords" content="web,html,css,html5,development">


  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/script.js"></script>

</head>


<body>

  <div class="collapse">

    <h2 class="collapse-control">Open box 1</h2>

    <div class="collapse-box">
      This is box 1
    </div>

  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...