jQuery ui слайдер с несколькими слайдерами с общим классом

Question

Я создал несколько слайдеров jquery ui с одним общим классом. И я вызываю слайд-событие, чтобы изменить текст в диапазоне на слайде. он отлично работает в первом, но не работает над другим из-за похожих классов.

для лучшего понимания найти fiddle demo

код JQuery щ Я использую:

$(".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

Вы используете селектор класса, и это влияет на все классы Вы должны использовать один и тот же класс, изменяется с помощью скольжения, поэтому использование

$ (this) inst Свинец селектора класса в функции

Используйте следующий код

$(".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));