两个具有相同类名的 jquery 滑块，但问题在于移动滑块答案

【问题标题】：two jquery sliders having same class name but the issue is on moving the slider两个具有相同类名的 jquery 滑块，但问题在于移动滑块
【发布时间】：2014-08-18 15:14:06
【问题描述】：

<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/

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

【问题讨论】：

在链接到 jsFiddle 时，请不要尝试回避在您的问题中发布代码的 SO 规则。您在输入问题时看到了警告。
什么我看不懂？
你不明白什么？在您的问题中发布您的代码。

标签： jquery jquery-ui

【解决方案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

【讨论】：

【解决方案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()

【讨论】：