0

Всех приветствую! У меня есть html и js код вынесенный в отдельный файл для удобности, в html я его подключаю. Сейчас мне понадобилось подключить библиотеку jquery для анимированного появления div (ui_div02), который будет "заставлять подвинуться" наш основной div (ui_div01). html код:

<head>

    <meta charset="utf-8">
    <title>Анпи - Голосовой Помощник</title>

    <script src="eel.js"></script>
    <script src="js/scripts.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">

 </head>

 <body>
   <div id="ui_div02" class="ui_div02">
      <p class="ui_txt03" onmousedown="viewIco02()"><img class="ui_ico02" src="media/ui_ico02.png">Начало</p>
      <p class="ui_txt04" onmousedown="viewIco03()"><img class="ui_ico03" src="media/ui_ico03.png">Настройки</p>
      <p class="ui_txt05" onmousedown="viewIco04()"><img class="ui_ico04" src="media/ui_ico04.png">Колл-слова</p>
      <p class="ui_txt06" onmousedown="viewIco05()"><img class="ui_ico05" src="media/ui_ico05.png">О нас</p>
   </div>

    <div id="ui_div01" class="ui_div01">
        <input type="image" src="media/ui_ico01.png" alt="Меню" id="ui_ico01" class="ui_ico01" onmousedown="viewDiv()">
      <p class="ui_txt01">Добро пожаловать!</p>
    </div>
</body>
</html>

сss код:

* {
    font-family: "Source Sans Pro", Regular, sans-serif;
}

body {
    background: #132723;
    overflow: hidden;
    display: flex;

    color: #f5f1de;
}

.ui_div01 {
    margin: 0px;
    width: 96vw;
    height: 96vh;
}

.ui_div02 {
    border-radius: 10px;
    width: 35%;
    display: none;
    font-size: 4.7vh;
    color: #f5f1de;
    padding: 0;
    margin: 0;
}

js код:

import 'jquery-3.6.0.min.js'

jQuery(function($) {
  $("#ui_ico01").click(function() {
    $("#ui_div02").fadeIn();
  });
});

Но при нажатии кнопки у нас ничего не срабатывает. Не могу понять в чём ошибка, скорее всего ошибка элементарная, но из-за своей неопытности я не могу понять. Прошу помочь. Структура проекта:

.
├──css/
|   ├──styles.css
├──js/
|   ├──scripts.js
|   ├──jquery-3.6.0.min.js
├──media/
|   ├──ui_ico01.png
|   ├──ui_ico02.png
|   ├──ui_ico03.png
|   ├──ui_ico04.png
|   ├──ui_ico05.png

5
  • а что import 'jquery-3.6.0.min.js' подключает jquery из какого-то репозитория? .....разве не надо в файле его подключить?.......... ЗЫ: смотри ошибки в консоли 16 авг 2022 в 17:43
  • Сделал подключение в файле index.html, а не в файле scripts.js. Теперь в консоли пишет Unexpected identifier
    – YAKMUVE
    16 авг 2022 в 17:46
  • а полный текст ошибки? ЗЫ: jquery надо подключать раньше остальных скриптов 16 авг 2022 в 17:47
  • Uncaught SyntaxError: Unexpected identifier перед jquery у меня загружается eel.js
    – YAKMUVE
    16 авг 2022 в 17:51
  • 1
    синтаксическая ошибка....... по-моему по тексту очевидно что ты пишешь код неправильно.......в консоли можно даже посмотреть где именно 16 авг 2022 в 17:53

1 ответ 1

1

Во-первых, если у вас там eel.js,картинки и пр., то присылайте ссылку на codepen, где будет весь проект

Во-вторых, у вас ещё есть какой-то скрипт, о котором вы не сказали, откуда функция viewIco02(), viewDiv() и прочие будут работать?

В третьих, пишите полностью текст ошибки

В четвёртых, не используйте input type='image', on-атрибуты событий, а также имена функций viewIco01, viewIco02 и пр. Номер того, что нужно показывать, должен передаваться в аргументе, а функция должны быть одна

Теперь по вашей проблеме:
Опция import работает только в скриптах-модулях, вы должны указать <script type='module'>, тогда вы сможете использовать директиву import в данном скрипте. У вас скрипт не является модулем, значит jQuery в нём не подключается. Вероятно, отсюда и ошибка

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.