Tengo algo de javascript que quiero convertir a jQuery... ¿Cómo cambiamos javascript a código jquery? ¿Simplemente cambiamos document.getElementById > $? ¿También cambiamos document.querySelectorAll > $? ¿La parte de la función también necesita ser modificada?
Por favor, vea mi código aprehender a continuación:
// 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'); } } }); }Cuando se usa $() con selectores, es muy similar a document.querySelectorAll() .
Por lo tanto, si desea consultar una identificación específica, debe usar un símbolo de libra # delante de la identificación:
$('#some-id') Realmente, sin embargo, no hay ninguna razón en la que pueda pensar en estos días para usar jQuery. Además, probablemente podría eliminar la necesidad de cualquiera de estos JavaScript simplemente usando fragmentos de ancla/hash y el :target . Tus URL podrían ser como somepage.html#slide-1 .