Code doesn't work without .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();
..the code above works well with .show()
in the end, but if I change it to .addClass('show')
it won't work.
I'd like to give it a class instead to apply float:left
property to all li
items instead of the default display:list-item
. How do I fix this?
Thanks!
Solution
After Jordan's answer:
You can replace the display:none
from li
and then add the class this way:
$("#showcase ul li:nth-child(" + ran + ")").css('display','').addClass('show');
OTHER TIPS
How are you hiding the element in the first place? If you're setting it to display: none
, for example, or using jQuery's hide(), which does the same thing, then that will override CSS defined elsewhere and keep your element hidden until you remove it. It ought to work if you use both .show()
(to remove display: none
) and .addClass('show')
(to add your CSS class).
Try replacing
$("#showcase ul li:nth-child(" + ran + ")").show();
with this one
$("#showcase ul li:nth-child(" + ran + ")").addClass('show').show();
instead of display: none
, use .addClass('hidden')
/ .removeClass('hidden')