Изменение минимального и максимального значений нескольких ползунков JQueryUI на странице из Выбрать

0

У меня есть страница. В нем много слайдеров 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, либо на вариант: выбрано неправильно, может ли кто-нибудь увидеть, где я ошибаюсь?

См. Здесь JSFiddle

Теги:
slider

2 ответа

1
Лучший ответ

Просто замените код следующим образом:

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.

Демо: скрипка

0
$(this + "option:selected")

Это не допустимый селектор. В основном вы пытаетесь конкатенировать элемент со строкой, это просто не сработает.

Вы можете сделать $(this).find('option:selected')

Ещё вопросы

Сообщество Overcoder
Наверх
Меню