Question

我正在构建一个包含不同输入类型=“范围”滑块的表单，我设法让它们显示一个值。

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

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

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

以下是我显示值的代码： 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
  });

Answer 1

以下是您的解决方案 - http://jsfiddle.net/MfegM/1155/ 您需要使用滑块

连接工具提示功能

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

由于你的函数已经占用（event，ui），你只需要添加$（this）来将结果与触发事件的滑块相关联

Answer 2

问题是你的工具提示正在针对每张幻灯片进行更改，因为你正在使用“.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/

中查看此演示

如果站点上存在多个滑块，则显示Jquery UI Sliders的值

2 个答案: