数组为空时隐藏div

Question

I have an array set up that has something added to the array every time to drop a word into a bucket on the page. I'm trying to show and hide certain div's depending on how many objects are in the array.

My code is:

if (test > 5){
    $(".moving").hide();
    $("#done").show();
}

This works perfectly except when the page first loads. The div with ID #done is still showing when the page first loads and then goes away when the array gets it's first object. (Array starts empty)

Answer 1

In your css just add #done{display: none;} That way the div will not show when page first loads.

Or use #done{visibility: hidden;} if you just want the div not to be visible.

Answer 2

If you don't have access to the HTML code you could hide it in ready function :

$(function(){
    $("#done").hide();
    //Or
    $("#done").css("display","none");

    //The rest of code
});

Hope this helps.

Answer 3

Use : #done{display:none;} or #done{opacity:0;}

Later in code, whenever you want to display it, you may use js/css to change display to block or opacity to 1 .

Answer 4

The following function will hide done div and show moving div when page is ready after complete page is rendered:

$(document).ready(function(){
  $("#done").hide();
  $(".moving").show();
});

Similarly you can use load method in to run a function on page load. but be aware load method is executed before complete page is rendered

Answer 5

In your current code, you can add the following at the very beginning of ready function,
$('#done').hide();
or
$('#done').css('visibility','hidden');