Realmente no sé lo que estoy haciendo, pero he estado jugando con jQuery tratando de lograr esto. Tenía la funcionalidad funcionando bien con la excepción de mostrar ocasionalmente el mismo testimonio dos veces seguidas, lo cual estoy tratando de resolver. Aquí está mi intento de código que no se computa, ¡estoy bastante seguro de que es algo obvio que no entiendo! Cualquier ayuda es apreciada.
Puede ver la funcionalidad prevista aquí en el pie de página del testimonio: https://blue-coast-f4d2bc.webflow.io/contact
function getNumber(previous) { if (previous === undefined) { i = Math.floor(Math.random() * 14) + 1; return i; } else { while { i = previous; i = Math.floor(Math.random() * 14) + 1; } return i; } var quoteNumb = getNumber(); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show'); var footHeight = $('.testimonial-container').height(); $('.testimonial-container').css({'min-height': footHeight + 'px'}); $('.testimonial-container').css({'max-height': footHeight + 'px'}); $(document).ready(function() { $(".refresh-button").click(function() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show'); quoteNumb = getNumber(quoteNumb); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show'); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000); }); }); });Sugeriría crear una secuencia aleatoria que determinará en qué orden aparecen los testimonios. De esta manera, no se repetirán hasta que hayan aparecido todos los elementos.
Comenzamos creando una secuencia como 0,1,2,3,4 ... N, luego la mezclamos usando (en este caso) una secuencia tipo Fisher-Yates .
Una vez que hemos creado nuestra secuencia, obtener el siguiente elemento es fácil. En este ejemplo, recorremos todos los elementos y luego volvemos al principio.
let state = 0; let sequence = getRandomSequence(1, 6); function getRandomSequence(start, length) { return shuffle(generateRange(start, length)) } function generateRange(start, length) { return Array.from({ length }, (v,k) => k + start) } // Fisher-Yates shuffle function shuffle(arr) { arr = [...arr]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } // Should drop in as a replacement... function getNumber() { return sequence[(state++) % sequence.length]; } quoteNumb = getNumber(); function showNextQuote() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show'); quoteNumb = getNumber(quoteNumb); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show'); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000); }); } showNextQuote(); .footer-testimonial-quote { visibility: hidden; } .show { visibility: visible; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button onclick='showNextQuote()'> Next quote </button> <br><br> <div class="footer-testimonial-quote">What a great product!</div> <div class="footer-testimonial-quote">Great product!</div> <div class="footer-testimonial-quote">Love it</div> <div class="footer-testimonial-quote">Amazing</div> <div class="footer-testimonial-quote">Meh</div> <div class="footer-testimonial-quote">Awesome, would recommend</div> let quotes = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; let state = 0; let sequence = getRandomSequence(0, quotes.length); function getRandomSequence(start, length) { return shuffle(generateRange(start, length)) } function generateRange(start, length) { return Array.from({ length }, (v,k) => k + start) } // Fisher-Yates shuffle function shuffle(arr) { arr = [...arr]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function nextInSequence() { let quoteNumb = quotes[sequence[(state++) % sequence.length]]; $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show'); $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000); } nextInSequence(); $(document).ready(function() { $(".refresh-button").click(function() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() { $('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show'); nextInSequence(); }); }); });