Как мне преобразовать этот jquery код в JavaScript?

Question

Это код jquery ниже:

$('div').on('click', function() {
 $(this).toggleClass('show-description');
});

Я хочу преобразовать его в JavaScript, потому что я получаю это сообщение об ошибке:

"$ не определено «

, когда я помещаю код jquery в раздел JavaScript codepen.io.

Существует ли причина, по которой код jquery выдает ошибку? Как я могу это исправить? Если это невозможно исправить, как я могу преобразовать код Jquery в JavaScript?

Я пытаюсь использовать toggleClass для всех элементов div при нажатии на элемент div.

Вот ссылка на кодовое руководство для справки: https://codepen.io/sophiesucode/pen/jOExXKw

Answer 1

• Вариант 1: Используйте, если pu sh jquery lib выше </body>, Здесь - это ваша демо

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

• Вариант 2: Используйте чистый javascript, как показано ниже

document.querySelector('div').onclick = function(){
  this.classList.toggle("show-description");
};

Answer 2

$('div').on('click', function() {
 $(this).toggleClass('show-description');
});

Может быть представлен ванилью javascript как:

var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
    div.onclick = function(e) {  //Adds the on click function to each
        e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
    }
}

Jquery код на самом деле javascript. Jquery - это библиотека, созданная для javascript. Чтобы устранить ошибку «$ is undefined», вам нужно добавить jquery на свою веб-страницу или импортировать ее в свой скрипт.

Существует замечательная статья о школах W3 , в которой рассказывается несколько способов добавить jquery на свои веб-страницы.

Answer 3

Ваш код не работает, потому что вы связали свой путь сценария как относительный путь.

Измените <script src="/assets/jquery.js"></script>

на этот <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

другим способом заключается в связывании файла jquery с помощью меню настроек в codepen.

Настройки> Javascript>, а затем поиск jquery в строке поиска CDN