两个具有相同类名的jquery滑块，但是问题出在移动滑块上 [英] two jquery sliders having same class name but the issue is on moving the slider

问题描述

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

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

This has two sliders of same class name and slider value is shown in a paragraph having same span class, But if I select a slider I want the value of it alone to change But currently both are changing.

推荐答案

您在滑块的Slide函数中的代码调用$( ".slider-value").html( ui.value );.如您所见，这正在更改类.slider-value的所有元素的内部HTML.您需要更改选择器以选择一个相对元素.为此，请更改:

Your code in the slider's slide function calls $( ".slider-value").html( ui.value );. This, as you can see, is changing the inner HTML of all elements with the class .slider-value. You need to change your selector to select a relative element instead. To do that, change:

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

到

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

jsFiddle示例

jsFiddle example

这篇关于两个具有相同类名的jquery滑块，但是问题出在移动滑块上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！