Событие клика Jquery не запускается

Question

Я переделываю свой сайт и хочу сделать все с нуля (без начальной загрузки, фундамента и т. Д.). Прямо сейчас я делаю навигационную панель и пытаюсь заставить ее включать и выключать слайд при нажатии. По некоторым причинам события щелчка не работают, и я не уверен, что сделал неправильно. Я сделал грубый пример в коде ручки здесь

HTML

<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

CSS

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}
.slide {
  transform: translateX(250px);
}

JS

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

Answer 1

Для примера кода:

Перейдите в настройки -> Добавить библиотеку -> поиск jquery и выберите.

Если это то же самое, что и ваш реальный код:

открыть консоль -> проверить, если $ не определен или $ не является jquery?

если $ не определено, добавьте действительный URL-адрес cdn jquery.

, если $ не является jquery, попробуйте найти конфликтующую библиотеку.

Answer 2

В вашем коде все хорошо, кроме ссылки на jQuery, проверьте загруженный путь jquery, или вы можете использовать, как показано ниже, теперь я использую jquery непосредственно с официального сайта jquery

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

дополнительная заметка: обнаружил, что вы добавили новый атрибут CSS3 («transition: transform 250ms;»), когда вы используете атрибут CSS3, убедитесь, что вы сбросили атрибут для всех браузеров, таких как wekit, moz,

спасибо

Answer 3

Вы можете добавить jquery cdn вручную в настройке, просто нажмите значок настройки и перейдите на вкладку javascript, затем под этим поиском jquery и нажмите ввод.

снимок экрана для настройки jquery cdn codepen

Answer 4

Вы неправильно загрузили jQuery для codepen. Чтобы добавить jQuery, просто замените <script src="jquery-3.4.1.min.js"></script>

на

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

Answer 5

Кажется, что здесь хорошо работает во фрагменте. Если вы замените свой скрипт на codepen на версию vanilla ниже, он тоже будет работать. (Примечание: проверено только в Chrome)

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}

.slide {
  transform: translateX(250px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

Альтернативный скрипт для вашего кода:

document.querySelector(".box").addEventListener("click", function(event){
  event.target.classList.toggle("slide");
});