集成自定义 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]);
}

更新的 JSFiddle