El código no funciona sin .show () - jQuery

Question

    this.randomtip = function(){
        var length = $("#showcase ul li").length;
        var ran = Math.floor(Math.random()*length) + 1;
        $("#showcase ul li:nth-child(" + ran + ")").show();
    };
    randomtip();

.. el código anterior funciona bien con .show() al final, pero si lo cambio a .addClass('show') no va a funcionar.

Me gustaría darle una clase en lugar de aplicar la propiedad float:left a todos los artículos li en lugar de la display:list-item defecto. ¿Cómo puedo solucionar esto?

Gracias!

Answer 1

Después de la respuesta de Jordan:

Puede reemplazar el display:none de li y luego agregar la clase de esta manera:

$("#showcase ul li:nth-child(" + ran + ")").css('display','').addClass('show');

Answer 2

¿Cómo estás escondiendo el elemento en el primer lugar? Si está configurando a display: none, por ejemplo, o el uso de la piel de jQuery (), que hace lo mismo, a continuación, que anulará CSS definida en otro lugar y mantener su elemento oculto hasta que lo elimine. Se debe trabajar si se utiliza tanto .show() (para eliminar display: none) y .addClass('show') (añadir su clase CSS).

Answer 3

Trate de reemplazar

$("#showcase ul li:nth-child(" + ran + ")").show();

con éste

$("#showcase ul li:nth-child(" + ran + ")").addClass('show').show();

Answer 4

en lugar de display: none, el uso .addClass('hidden') / .removeClass('hidden')