将Jquery滑块与模式弹出窗口结合使用时的问题

Question

I'm building a Timeline / Map. It's a map with a slider at the top; when you drag the slider, different icons show up on the map that can be clicked to engage modal pop-ups (it also displays overlays on the map). It works wonders and looks Beautiful, EXCEPT one thing: On load, EVERYTHING is displayed. How can I get it to default to the first date on the map as the only icons and overlaps that are displayed?

The code is below, but I am not much for code and can't figure out what I'm doing wrong:

there's a list of like 500 IDs like this

var popups = [ {id:"cultarg1969a", start:1969, end:1969},

then there's this:

 $(document).ready(function() {
  $("#slider").slider({
    min: 1491,
    max: 2020,
    step: 1,
    value: 1491,
  });


$( "#slider" ).bind( "slide", function(event, ui) {
    $(".category1,.category2,.category3,.category4,.category5,.iso").hide();
 $("#yearIndicator").text(ui.value);            
        for (var index=0;index<popups.length;index++) {
        var popup = popups[index];
        if (ui.value >= popup.start && ui.value <= popup.end) {
    $("#" + popup.id).show();
    }
} 
});

  $("#0").addClass("selected");

}); 

I just want the items for year 1491 to show up when the page loads. What am I doing wrong? thank you.

Answer 1

My guess is that you probably want each of the elements in the popups array to initially be hidden, which is most easily done by having display: none in their initial CSS. The .show() call should override that display property when the time comes to show it.