alguien puede explicar el código a continuación con todas las funciones como .ready() y .next().show().prev().hide(); , .prev().show().next().hide(); . Y si es posible, ¿cómo puedo hacerlo JS solo sin JQuery? Gracias por adelantado.
$(document).ready(function(){ $(".divs div").each(function(e) { if (e != 0) $(this).hide(); }); $("#next").click(function(){ if ($(".divs div:visible").next().length != 0) $(".divs div:visible").next().show().prev().hide(); else { $(".divs div:visible").hide(); $(".divs div:first").show(); } return false; }); $("#prev").click(function(){ if ($(".divs div:visible").prev().length != 0) $(".divs div:visible").prev().show().next().hide(); else { $(".divs div:visible").hide(); $(".divs div:last").show(); } return false; }); }); <div class="divs"> <div class="cls1">1</div> <div class="cls2">2</div> <div class="cls3">3</div> <div class="cls4">4</div> <div class="cls5">5</div> <div class="cls6">6</div> <div class="cls7">7</div> </div> <a id="prev">prev</a> <a id="next">next</a>esos .ready() etc. son métodos jQuery, dan una abreviatura para algunos métodos JavaScrpit HTML DOM. puede buscar este documento para esos métodos
escriba la misma página sin jQuery, se agregan algunas explicaciones de funciones al código
const prevButton = document.querySelector('#prev'); // same as $('#prev') const nextButton = document.querySelector('#next'); const cls = document.querySelectorAll('.cls'); // like $('.cls') let showIndex = 0; cls[showIndex].classList.add('show'); // .addEventListener('click', function () {...}) like .click(function () {...}) prevButton.addEventListener('click', () => { cls[showIndex].classList.remove('show'); showIndex = (showIndex - 1 + cls.length) % cls.length; // like .prev() cls[showIndex].classList.add('show'); }); nextButton.addEventListener('click', () => { cls[showIndex].classList.remove('show'); showIndex = (showIndex + 1) % cls.length; // like .next() cls[showIndex].classList.add('show'); }); .cls { display: none; } .show { display: block; } <div class="divs"> <div class="cls">1</div> <div class="cls">2</div> <div class="cls">3</div> <div class="cls">4</div> <div class="cls">5</div> <div class="cls">6</div> <div class="cls">7</div> </div> <a id="prev"><button>prev</button></a> <a id="next"><button>next</button></a>