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

我正在构建一个包含不同输入类型=“范围”滑块的表单，并设法让它们显示一个值。如果网站上存在多个滑块，则显示Jquery UI滑块的值

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

最后我想有至少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 
    });

来源

2013-10-30 LoveAndHappiness

问题是你的工具提示正在改变每一张幻灯片，因为你正在改变所有div“.ui-slider-handle”。

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-31 00:07:53

在哪里链接的演示与我链接的演示不同？谢谢。 – LoveAndHappiness

@ user2807996对不起，错误的链接，你现在可以试试吗？ –

非常感谢您的努力。我目前正在研究这一点。只是想让你知道，更新你的jsifddle，不能正常工作。请不要误会，因为我感谢你的帮助。我只是想能够调整每个滑块分开。但我正在研究这一点。 – LoveAndHappiness

这里是您的解决方案 - http://jsfiddle.net/MfegM/1155/ 您需要的功能与滑块

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

连接的提示由于您的功能已经发生（事件，UI），所有您需要添加$（this）将结果与触发事件的滑块相关联

来源

2013-10-31 01:13:30

非常感谢。你真棒。 – LoveAndHappiness

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

回答

相关问题