集成自定義jQuery滑塊

Question

新增前端開發並與jQuery混淆。我有一個自定義步驟的jQuery滑塊，但無法使輸出與我的程序的其餘部分同步。我想我需要.addEventListener（'input'）來獲取由滑塊產生的值，以便輸出（#infocenter）底部的文本更新爲滑塊所選的年份。

document.getElementById('infocenter').innerHTML = '<p>(this text should update with the year above)</p>'; 


    var sliderAmountMap = [1940, 1950, 1960, 1970, 1980, 1990, 2009, 2015]; 

//new jQuery slider 
    $(function() { 
     $("#slider").slider({ 
      value: 0, 
      min: 0, 
      max: sliderAmountMap.length-1, 
      slide: function(event, ui) { 
      $("#amount").val(sliderAmountMap[ui.value]); 
      } 
     }); 
     $("#amount").val(sliderAmountMap[$("#slider").slider("value")]); 
    }); 

https://jsfiddle.net/kaseyklimes/c0xpL1va/

Answer 1

如果我理解正確的，我想你只需要在你更新文本框的值，同時更新所需元素的html：

slide: function(event, ui) { 
    $("#amount").val(sliderAmountMap[ui.value]); 
    $("#infocenter").html(sliderAmountMap[ui.value]); 
} 

Updated JSFiddle