0

我的 jquery-ui 范围滑块行为不合逻辑。谁能解释为什么这里只有一个滑块有效？请注意，在实际页面上有超过 2 个滑块。

http://jsfiddle.net/uVeUD/

这段代码的重点是使用代码中的变量一次更改我的所有滑块。但是，正如您在小提琴中看到的那样，如果它的值与 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") ); 
});

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

4

2 回答 2

2

obj is global, and you're passing strings and not integers to the options of the slider :

$(".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

You could also set the options for the slider with data attributes.

于 2013-07-11T23:20:49.707 回答
1

将 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/

是你想要的吗？

于 2013-07-11T23:16:13.097 回答