У меня есть страница. В нем много слайдеров JQueryUI. Значение этих ползунков может быть задано текстовым полем или путем ручной перетаскивания ползунка. Минимальные и максимальные значения ползунков можно установить, изменив параметр в раскрывающемся меню, например:
Select slider:
<select class="dropdown" id="slider3_select">
<option value="1" data-low="1" data-high="50">Sips</option>
<option value="2" data-low="1" data-high="25">Cups</option>
<option value="3" data-low="1" data-high="10">Litres</option>
</select>
JQuery, который я использую для получения данных с низким значением и высоким значением данных, и обновлением слайдера на их основе, является:
$('.dropdown').change(function(){
var selector = ("#" + $(this).parent().find(".slider").attr("id")),
currentVal = parseInt($(selector).slider("value")),
newBegin = $(this + "option:selected").data("low"),
newEnd = $(this + "option:selected").data("high");
$(selector).slider({
value: currentVal,
min: newBegin,
max: newEnd
});
});
Это верно работает для первого слайдера на странице, но для последующих sliders- это не работает, значение newBegin & newEnd не обновляется. Я предполагаю, что я нацелен либо на выбор.dropdown, либо на вариант: выбрано неправильно, может ли кто-нибудь увидеть, где я ошибаюсь?
Просто замените код следующим образом:
newBegin = $(this + "option:selected").data("low"),
newEnd = $(this + "option:selected").data("high");
с этим:
newBegin = $(this).find("option:selected").data("low"),
newEnd = $(this).find("option:selected").data("high");
Вы должны правильно использовать selectors
в jQuery.
Демо: скрипка
$(this + "option:selected")
Это не допустимый селектор. В основном вы пытаетесь конкатенировать элемент со строкой, это просто не сработает.
Вы можете сделать $(this).find('option:selected')