Question

<div class="slider"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>

<div class="slider"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>

$(".slider").slider({
    value: 1,
    min: 0,
    max: 100,
    step: 1,
    slide: function (event, ui) {
        $(".slider-value").html(ui.value);
    }
});

$(".slider-value").html($('.slider').slider('value'));

http://jsfiddle.net/5TTm4/1899/

这有两个相同类名的滑块，滑块值显示在具有相同span类的段落中，但如果我选择一个滑块，我希望它的值单独更改但是当前两者都在变化。

Answer 1

滑块滑动功能中的代码调用$( ".slider-value").html( ui.value );。正如您所看到的，这正在使用类.slider-value更改所有元素的内部HTML。您需要更改选择器以选择相对元素。为此，请更改：

$( ".slider-value").html( ui.value );

到

$(this).next().find('span.slider-value').html(ui.value);

<强> jsFiddle example

Answer 2

很奇怪，但有效：

slide: function( event, ui ) {
    $(ui.handle).closest(".slider").next( "p").find(".slider-value").html( ui.value );
}

http://jsfiddle.net/5TTm4/1902/

ui object description closest() next() find()

两个jquery滑块具有相同的类名，但问题是移动滑块

2 个答案: