Question

我的jquery-ui范围滑块表现不合逻辑。任何人都可以解释为什么这里只有一个滑块有效吗？请注意，在实际页面上有两个以上的滑块。

此代码的要点是使用代码中的变量一次更改所有滑块。但是，正如你可以在小提琴中看到的那样，如果它与min没有相同的值，它将无法工作。这是什么原因？

$( "div.slider-div" ).each(function(){
    obj = $("input", $(this).parent());
    $(this).slider({
       range: "min",
       value: obj.val(),
       min: obj.attr("min"),
       max: obj.attr("max"),
       slide: function( event, ui ) {
           $("input", $(this).parent()).val( ui.value );
           $("input", $(this).parent()).change();
       }
    });   

    obj.val( $(this).slider("value") ); 
});

我需要有用的东西，所以如果没有人可以修复它，我愿意接受滑块的替代建议。

Answer 1

obj是全局的，你将字符串而不是整数传递给滑块的选项：

$(".slider-div").each(function () {
    var obj = $(this).siblings('input');
    $(this).slider({
        range: "min",
        value: parseInt(obj.val(),10),
        min  : parseInt(obj.attr("min"),10),
        max  : parseInt(obj.attr("max"),10),
        slide: function (event, ui) {
            $(event.target).siblings('input').val(ui.value).trigger('change');
        }
    });
});

FIDDLE

您还可以使用数据属性设置滑块的选项。

Answer 2

将attr更改为data-val而不是val。看这里：

<input type="range" style="border:0px;margin-left:10px;" value="40" data-min="8" data-max="72" id="shadow-size-2">

http://jsfiddle.net/uVeUD/1/

这是你想要的吗？

Jquery ui范围

2 个答案: