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

Question

我正在建立时间轴/地图。 这是一张顶部带有滑块的地图。 拖动滑块时，地图上会显示不同的图标，可单击这些图标以启用模式弹出窗口（它还会在地图上显示叠加层）。 它能产生奇迹，看起来很漂亮，除了一件事：加载时，显示一切。 如何将其默认设置为地图上的第一个日期，因为它仅显示图标和重叠部分？

下面的代码，但是我对代码的要求不高，无法弄清楚我在做什么错：

有一个像这样的500个ID的列表

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

然后是这样的：

 $(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");

}); 

我只希望页面加载时显示1491年的项目。 我究竟做错了什么？ 谢谢。

Answer 1

我的猜测是，您可能希望最初隐藏popups数组中的每个元素，这最简单的方法是通过display: none在其初始CSS中display: none 。 当需要display时， .show()调用应覆盖该display属性。