2

我正在构建一个表单，其中包含不同的输入 type="range" 滑块，我设法让它们显示一个值。

但是当我包含多个滑块时，这些值实际上并没有单独改变。我希望他们为自己改变每一个。

最后，我希望至少有 10 个范围滑块。有什么建议么？这是小提琴：

http://jsfiddle.net/MfegM/1153/

提前感谢您提供的任何提示。

这是我的值显示代码： var initialValue = 50;

  var sliderTooltip = function(event, ui) {
      var curValue = ui.value || initialValue;
      var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' + curValue + '</div><div class="tooltip237-arrow"></div></div>';

      $('.ui-slider-handle').html(tooltip);

  }

  $("#slidercomeagain").slider({
      value: initialValue,
      min: 0,
      max: 100,
      step: 1,
      create: sliderTooltip,
      slide: sliderTooltip
  });


  $("#sliderrecommendation").slider({
      value: initialValue,
      min: 0,
      max: 100,
      step: 1,
      create: sliderTooltip,
      slide: sliderTooltip
  });
4

2 回答 2

1

这是您的解决方案 - http://jsfiddle.net/MfegM/1155/ 您需要将工具提示的功能与滑块连接起来

$(this).children('.ui-slider-handle').html(tooltip);

由于您的函数已经采用 (event, ui)，您只需添加 $(this) 以将结果与触发事件的滑块相关联

于 2013-10-31T01:13:30.873 回答
0

问题是每张幻灯片的工具提示都在变化，因为您正在使用“.ui-slider-handle”类更改所有 div。

 var sliderTooltip = function(event, ui) {
      var curValue = ui.value || initialValue;
      //get the id of the slider 
      var target =  $(event.target).attr("id");

      var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' 
             + curValue + '</div><div class="tooltip237-arrow"></div></div>';

      // update the tooltip of the target slider
      $("#"+target + ' .ui-slider-handle').html(tooltip);

  }

上面的代码只更新了目标滑块的工具提示。

在 jsfiddle http://jsfiddle.net/WzqjC/3/中查看这个演示

于 2013-10-31T00:07:53.307 回答