javascript - 将 Jquery slider 与模态弹出窗口相结合的问题

Question

我正在构建时间轴/ map 。这是一张顶部带有 slider 的 map ；当您拖动 slider 时， map 上会显示不同的图标，单击这些图标可以使用模态弹出窗口(它还会在 map 上显示叠加层)。它创造奇迹并且看起来很漂亮，除了一件事:加载时，一切都会显示。我怎样才能让它默认为 map 上的第一个日期作为显示的唯一图标和重叠部分？

代码在下面，但我对代码的了解不多，也不知道我做错了什么:

有一个类似这样的 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 数组中的每个元素最初都隐藏起来，这最容易通过在其初始 CSS 中添加 display: none 来实现。 .show() 调用应该在需要显示时覆盖 display 属性。