Mostrar clases aleatorias

Digamos que tengo algunas clases como:

<div class="something" style="display: none">Some text I would like to show</div>
<div class="something" style="display: none">Some text2 I would like to show</div>
<div class="something" style="display: none">Some text3 I would like to show</div>
<div class="something" style="display: none">Some text4 I would like to show</div>
<div class="something" style="display: none">Some text5 I would like to show</div>

Y quiero mostrar una clase aleatoria cada pocos segundos. Supongo que el pseudocódigo sería algo así:

    setInterval(function() {
        $('.something').hide();
        var rand_number = random(1, ('.something').length);
        $('.something').array[rand_number].show();
    }, 5000);

Gracias.

preguntado el 16 de mayo de 11 a las 17:05

Tu pseudocódigo se ve bastante bien. ¿Lo has probado? -

5 Respuestas

Trate de evitar evaluar $('.something') con demasiada frecuencia:

setInterval(function() {
    var $s = $('.something');
    var r = Math.floor(Math.random() * $s.length);
    $s.hide().eq(r).show();
}, 5000);

Si sabe que la lista de elementos no cambiará una vez que se cargue el documento, puede simplificar aún más:

$(function() { // short-hand for document.ready
    var $s = $('.something');
    var count = $s.length;
    setInterval(function() {
        var r = Math.floor(Math.random() * count);
        $s.hide().eq(r).show();
    }, 5000);
});

contestado el 16 de mayo de 11 a las 21:05

setInterval(function() {
    var $something = $('.something').hide();
    var rand_number = Math.floor(Math.random() * $something.length);
    $something.eq(rand_number).show();
}, 1000);

Ejemplo en jsfiddle

contestado el 16 de mayo de 11 a las 21:05

setInterval(function() {
        $('.something').hide();
        var classes = $('.something');
        var rand_number = Math.round(Math.random() * (classes.length));
        $(classes[rand_number]).show();
    }, 5000);

contestado el 16 de mayo de 11 a las 21:05

Podría fusionar la línea 2 y 3 para var classes = $('.something').hide(); - Znarkus

no hay random(m, n) función en JS estándar - Alnitak

tampoco es necesario el -1, Math.random () devuelve [0, 1) (es decir, inclusivo de 0 a 1 exclusivo). - Alnitak

setInterval(function() {
    $('.something').hide();
    var rand_number = random(0, ('.something').length - 1);
    $('.something:eq('+rand_number+')').show();
}, 5000);

contestado el 16 de mayo de 11 a las 21:05

Yo usaría .eq() más bien que :eq() - Alnitak

@Znarkus Para evitar tener que concatenar valores en un selector y luego analizarlo. Supuestamente también es más rápido. - Alnitak

@alnitak Ah sí, tiene sentido. - Znarkus

Su ejemplo parece bastante sólido, sin embargo, tengo algunas sugerencias: 1. Su clase .something probablemente debería tener display: none en la hoja de estilo y no en línea; además (inicialmente) no tiene que esconderse programáticamente. No tiene sentido repetir eso una y otra vez.

  1. Esto también podría lograrse utilizando ID que se almacenan en una matriz, por lo que no tiene que consultar el DOM cada vez para obtener los elementos. Puede usar esto junto con $ (". Algo"). Hide (); si no desea almacenar el artículo mostrado anteriormente. Esto puede no ser práctico si los divs se generan dinámicamente.

  2. Puede utilizar un elemento y actualizar su contenido; por supuesto, puede haber razones estéticas para usar diferentes elementos que no están implícitos en su ejemplo.

  3. Puede utilizar un elemento y actualizar su contenido; por supuesto, puede haber razones estéticas para usar diferentes elementos que no están implícitos en su ejemplo.

contestado el 16 de mayo de 11 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.