Question

我试图创建多个jquery滑块，动态创建带有值的跨度，但我得到每个滑块的值的实例。

看一下小提琴http://jsfiddle.net/houareau/RvSgj/182/

或

var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
    value : 5,
    min   : 1,
    max   : $(this).data('max'),
    step  : 1,
    slide : function (event, ui) {
       a = ui.value;
       $(slider).next().find('span.sliderValue').html(ui.value);
    }
});
});

Answer 1

您忘记发布create功能，这是真正的问题，您可以将两个跨度附加到两个滑块上。

$(".slider").each(function () {
    $(this).slider({
        min: 0,
        max: $(this).data('max'),
        step: 1,
        create: function (event, ui) {
            $(event.target).find('a').append($(event.target).next('.sliderValue'));
        },
        slide: function (event, ui) {
            $(ui.handle).find('span.sliderValue').html(ui.value);
        }
    });
});

FIDDLE

不使用全局变量来获取值，您可以随时调用$( ".selector" ).slider( "value" );

来获取滑块值

Answer 2

是的，这是新的fiddle！

$(".slider").slider({
min: 0,
max: $(this).data('max'),
step: 1,
    create: function (event, ui) {           
        $(event.target).find('a').append( $('<span />').addClass('sliderValue') )
    },
slide: function (event, ui) {
    $(ui.handle).find('span.sliderValue').html(ui.value);
}

}）;

处理多个jquery滑块

2 个答案: