如何将此 jquery 代码转换为 JavaScript？

Question

This is the jquery code below:

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

I want to convert it to JavaScript because I get this error message:

"$ is undefined "

when I put the jquery code in the JavaScript section of codepen.io.

Is there a reason the jquery code is producing an error? How can I fix this? If it is not possible to fix, how can I convert the Jquery code to JavaScript?

I'm trying to use toggleClass on all the divs when the div is clicked.

Here is a link to the codepen for reference: https://codepen.io/sophiesucode/pen/jOExXKw

Answer 1

• Option 1: Use should push the jquery lib above </body> , Here is your demo

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

• Option 2: Use pure javascript like below

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

Answer 2

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

Can be represented by vanilla javascript as:

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 code actually is javascript. Jquery is a library built for javascript. To solve the error "$ is undefined" you would have to add jquery to your webpage, or import it in your script.

There is this wonderful article on W3 Schools which teaches multiple ways to add jquery to your webpages.

Answer 3

Your code doesn't work because you linked your script path as a relative path.

Change this <script src="/assets/jquery.js"></script>

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

another way is to link the jquery file using the settings menu in codepen.

Settings > Javascript > then search jquery in the CDNsearch bar