Question

我有一个页面。它有许多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
        });
      });

这适用于页面上的第一个滑块，但后续滑块失败 - 在这些滑块上，newBegin＆amp; newEnd无法更新。我想我的目标是选择.dropdown或选项：选择不正确，有人能看到我出错的地方吗？

See the JSFiddle here

Answer 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");

您需要在jQuery中正确使用selectors。

演示：Fiddle

Answer 2

$(this + "option:selected")

这不是有效的选择器。基本上你试图用一个字符串连接一个元素，它只是不起作用。

你可以$(this).find('option:selected')

改变最小和; Select中页面上多个JQuery UI滑块的最大值

See the JSFiddle here

2 个答案: