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

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

但当我包含多个滑块时，值实际上不会单独更改。 我想让他们各自改变

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

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

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

var sliderTooltip=函数（事件，用户界面）{
var curValue=ui.value | | initialValue；
变量工具提示=''+曲线值+''；
$（'.ui滑块句柄'）.html（工具提示）；
}
$（“#slidercome”）。滑块({
value:initialValue，
分:0,，
最高：100，
步骤：1，
创建：滑块工具提示，
幻灯片：幻灯片工具提示
});
$（“#sliderrecommendation”）.滑块({
value:initialValue，
分:0,，
最高：100，
步骤：1，
创建：滑块工具提示，
幻灯片：幻灯片工具提示
});

问题在于，您的工具提示在每一张幻灯片上都在更改，这是因为您正在使用“.ui滑块句柄”类更改所有div

var sliderTooltip=函数（事件，用户界面）{
var curValue=ui.value | | initialValue；
//获取滑块的id
var target=$（event.target）.attr（“id”）；
变量工具提示=“”
+曲线值+“”；
//更新目标滑块的工具提示
$（“#”+target+'.ui滑块句柄'）.html（工具提示）；
}

以上代码仅更新目标滑块的工具提示

请参见JSFIDLE中的此演示，这是您的解决方案- 您需要将工具提示功能与滑块连接

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

---

由于您的函数已经执行了（事件、ui），因此您只需添加$（此项）即可将结果与触发事件的滑块关联

您链接的演示与我链接的演示究竟在哪里不同？谢谢。非常感谢你的努力。我目前正在调查此事。只是想让您知道，您更新的JSIFDDL无法正常工作。请不要误会，因为我感谢你的帮助。我只是想能够，分别调整每个滑块。但我正在调查此事。@user2807996抱歉！搞错了！更新了我的答案，希望你能帮上忙再次谢谢你。你介意把这个放进你以前做的小提琴里吗？尽管如此，我还是非常感谢你的努力。我想我现在要弄明白了。但我不是jquery的专家。@user2807996完成！更新了我的答案，添加了指向jsfiddle的链接，非常感谢。你真棒。

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