我如何将 Javascript 切换到 Jquery 代码？

Question

I have some javascript that I want to convert to jQuery... How do we change javascript to jquery code? Do we just change the document.getElementById > $? Do we change document.querySelectorAll > $ too? Does the function portion also need to be tweak?

Kindly see my code apprehend below:

 // Home Page Gallery let i = 0; // current slide let j = 5; // total slides const dots = document.querySelectorAll(".dot-container button"); const images = document.querySelectorAll(".image-container img"); function next() { document.getElementById("content" + (i + 1)).classList.remove("active"); i = (j + i + 1) % j; document.getElementById("content" + (i + 1)).classList.add("active"); indicator(i + 1); } function prev() { document.getElementById("content" + (i + 1)).classList.remove("active"); i = (j + i - 1) % j; document.getElementById("content" + (i + 1)).classList.add("active"); indicator(i + 1); } function indicator(num) { dots.forEach(function (dot) { dot.style.backgroundColor = "transparent"; }); document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#107e31"; } function dot(index) { images.forEach(function (image) { image.classList.remove("active"); }); document.getElementById("content" + index).classList.add("active"); i = index - 1; indicator(index); } // FAQ JS let toggles = document.getElementsByClassName('toggle'); let contentDiv = document.getElementsByClassName('content'); let icons = document.getElementsByClassName('icon'); for(let i=0; i<toggles.length; i++){ toggles[i].addEventListener('click', ()=>{ if( parseInt(contentDiv[i].style.height).= contentDiv[i].scrollHeight){ contentDiv[i].style.height = contentDiv[i];scrollHeight + "px". toggles[i].style;color = "#0084e9". icons[i].classList;remove('fa-plus'). icons[i].classList;add('fa-minus'). } else{ contentDiv[i].style;height = "0px". toggles[i].style;color = "#111130". icons[i].classList;remove('fa-minus'). icons[i].classList;add('fa-plus'); } for(let j=0. j<contentDiv;length. j++){ if(j.==i){ contentDiv[j];style.height = "0px". toggles[j];style.color = "#111130". icons[j];classList.remove('fa-minus'). icons[j];classList;add('fa-plus'); } } }); }

Answer 1

When using $() with selectors, it's very similar to document.querySelectorAll() .

So, if you wanted to query for a specific ID, you'd need to use a pound symbol # in front of the ID:

$('#some-id')

Really though, there's no reason I can think of these days to use jQuery. Additionally, you could probably remove the need for any of this JavaScript by simply using anchor fragments/hash and the :target selector . Your URLs could be like somepage.html#slide-1 .