jQuery ui 滑块多个滑块事件具有共同 class

Question

我创建了多个 jquery ui 滑块，只有一个公共 class。我正在调用幻灯片事件来更改幻灯片中的文本。它在第一个上运行良好，但由于类似 classes.

而无法在其他上运行

为了更好地理解找到 fiddle demo

jquery ui 我使用的代码：

$(".measSlider").slider({
    orientation: "horizontal",
    range: "min",
    min: 1000,
    max: 30000,
    value: 10000,
    slide: function( event, ui ) {
        $('.measSlider span').html("$ " + $( ".measSlider" ).slider( "values", 0 ));
    }
});
$('.measSlider span').html("$ " + $( ".measSlider" ).slider( "values", 0 ));

Answer 1

您正在使用 class 选择器，这会影响所有 classes 您必须使用通过滑动更改的相同 class，因此请使用

$(this) instead of class selector in the function

使用以下代码

$(".measSlider").slider({
    orientation: "horizontal",
    range: "min",
    min: 1000,
    max: 30000,
    value: 10000,
    slide: function( event, ui ) {
        $(this).children('span')
        .html("$ " + $( this).slider( "values", 0 ));
    }
});
$('.measSlider span').html("$ " + $( ".measSlider" ).slider("values",0));