处理多个jquery滑块

Handling multiple jquery sliders

本文关键字：滑块 jquery 处理      更新时间：2023-09-26

我试图制作多个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);
    }
});
});
是的，这是新小提琴！ 
$(".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);
}

})；

您忘记发布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" ); 来获取滑块值

相关文章：