在更大的数字上显示元素

I have a script that gets a number from my database and what I want with this is the higher number it is, the more elements to show.

Let's take a look at the code:

 setInterval(function player(){
        $.ajax({ 
            type: "POST", 
            url: "url",
            datatype: 'json',
            success: function(data){
                var parsed_data = $.parseJSON(data);
                var number = parsed_data.number;
                    if(number >= 100) {
                      $('#element1').css('display','block'); 
                    }
                   if(number >= 1000) {
                       $('#element2').css('display','block');
                    }
            }
    });
    },1000);

Okey, so this works the first step I want it to. But I also want to remove it again, because now if I raises the number to 100 it shows element1 (super), but if I then take the number down again under 100 it will still show.

And my .css

#element1, #element2 { display: none; }

So what am I missing here? I have also tried with .setAttribute

Thanks in advance

Dont u need a if statsment ?

if(number <= 99) {
  $('#element').css('display','block'); 
}

or

else {
  $('#element').css('display','block'); 
}

And then a

#element { display: none; }

setInterval(function player(){
        $.ajax({ 
            type: "POST", 
            url: "url",
            datatype: 'json',
            success: function(data){
                var parsed_data = $.parseJSON(data);
                var number = parsed_data.number;
                if(number >= 100) {
                    $('#element1').css('display','block'); 
                } else if(number < 100) {
                    $('#element1').hide();
                }
                if(number >= 1000) {
                    $('#element2').css('display','block');
                } else if(number < 1000) {
                    $('#element2').hide();
                }
            }
        });
    },
1000);

Only thing is.. I think it needs to be if(number >= 1000 && number >= 100) { - Not sure though.

When the dataType is set to json, it's parsed automagically by jQuery, parsing the data once more creates a parse error :

setInterval(function() {
    $.ajax({
        type: "POST",
        url: "url",
        datatype: 'json'
    }).done(function (data) {
        var number = parseInt(data.number, 10);
        $('#element1').toggle(number >= 100);
        $('#element2').toggle(number >= 1000);
    });
}, 1000);

You should hide all elements and show them again according to the number returned by your AJAX request.

success: function(data) {
  var parsed_data = $.parseJSON(data);
  var number = parsed_data.number;
  // hide all elements
  $("[id^='element']").hide();
  // show them again according to `number`
  if (number >= 100)  $('#element1').show();
  if (number >= 1000) $('#element2').show();
}