Question

我想有两个jquery-ui滑块，我使用以下代码作为模板

当我添加第二个滑块时，两个工具提示的值都是最新滑块值的值，而不是它们的不同滑块。代码定义了var toolip，然后将其反映到所有滑块而不仅仅是受影响的滑块

                         var initialValue1 = 2012; // initial slider value
                    var sliderTooltip1 = function (event, ui) {
                        $('#amount1').val(ui.value);
                        var curValue1 = ui.value || initialValue1;
                        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 + '</div><div class="tooltip-arrow"></div></div>';
                        $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
                    }


                    $('#slider1').slider({
                        value: 100,
                        min: 0,
                        max: 500,
                        step: 1,
                        create: sliderTooltip1,
                        slide: sliderTooltip1
                    });
                    $('#amount1').val($('#slider1').slider('value'));

                    $('#amount1').change(function () {
                        var value = this.value;
                        //         var value = this.value.substring(1);
                        console.log(value);
                        $("#slider1").slider("value", parseInt(value));
                    });

注意 - 这是一个简单的滑块而不是范围滑块。

如何让工具提示值具有不同的正确值。任何帮助将不胜感激。

THKS 肯

Answer 1

您应该指定目标，因为您要定位类.ui-slider-handle：

的所有元素

http://jsfiddle.net/9qwmX/494/

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

带工具提示的两个jquery-ui滑块具有相同的值？

1 个答案: