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

集成自定义jQuery滑块

1 个答案: