將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屬性。