Hice un control deslizante de cita simple que cambia la oración en la pantalla aleatoriamente con cada clic, pero no quiero que muestre la misma cita dos veces seguidas. ¿Cómo puedo excluir la cotización actual del algoritmo Math.random y hacer que el control deslizante muestre cualquier otra cotización con cada clic?
(No quiero que cada cita se muestre solo una vez, solo quiero evitar que el control deslizante muestre la misma en una fila)
HTML:
<div class="container" onclick="changequote()"> <div class="quote">Sentence 1</div> <div class="quote">Sentence 2</div> <div class="quote">Sentence 3</div> </div> <script>window.onload = changequote()</script>JS:
function changequote() { var random = Math.floor(Math.random() * $('.quote').length); $('.quote').hide().eq(random).fadeTo(500, 1); }CSS:
.quote { display: none; }Puede alternar una clase para realizar un seguimiento de la cotización current . Luego elija al azar entre las comillas que son :not(.current) .
También moví el javascript a la sección de javascript, lo que realmente ayuda para el mantenimiento. No hay nada como verter el archivo .js al depurar solo para descubrir que el problema se origina en el html.
function changequote() { let $quotes = $('.quote:not(.current)'); $('.quote').removeClass('current').hide(); //reset all quotes $quotes //pick from all quotes except the previously selected one .eq(Math.floor(Math.random() * $quotes.length)) .addClass('current') .fadeIn(); } $('.container').on('click', changequote).click(); //click will initialize on page load .quote{ cursor: pointer; display: none;} <div class="container"> <div class="quote">Sentence 1</div> <div class="quote">Sentence 2</div> <div class="quote">Sentence 3</div> <div class="quote">Sentence 4</div> <div class="quote">Sentence 5</div> <div class="quote">Sentence 6</div> <div class="quote">Sentence 7</div> <div class="quote">Sentence 8</div> <div class="quote">Sentence 9</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Simplemente guarde el índice en una variable global, usando cierres
const changeQuote = (() => { let lastSelectedIndex; return function() { let random = Math.floor(Math.random() * $('.quote').length); while(true) { random = Math.floor(Math.random() * $('.quote').length); if(random !== lastSelectedIndex) break; } $('.quote').eq(lastSelectedIndex).hide(); $('.quote').eq(random).fadeIn(500); lastSelectedIndex = random; } })();EDITAR: Aquí hay un ejemplo en ejecución
const changeQuote = (() => { let lastSelectedIndex; return function() { let random = Math.floor(Math.random() * $('.quote').length); while(true) { random = Math.floor(Math.random() * $('.quote').length); if(random !== lastSelectedIndex) break; } $('.quote').eq(lastSelectedIndex).hide(); $('.quote').eq(random).fadeIn(500); lastSelectedIndex = random; } })(); .quote { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quote">Sentence 1</div> <div class="quote">Sentence 2</div> <div class="quote">Sentence 3</div> <button onclick="changeQuote()">Show Random Quote</button>