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>

我用来获取上面的 data-low 和 data-high 值并根据它们更新滑块的 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 和 newEnd 的值无法更新。我想我的目标是 select .dropdown 或 option:selected 不正确，谁能看到我哪里出错了？

在此处查看 JSFiddle

4

2 回答 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 中正确使用。

演示：小提琴

于 2013-10-21T12:16:04.963 回答
0 
$(this + "option:selected")

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

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

于 2013-10-21T12:13:10.783 回答