2

我有一个 jquery-ui-slider 脚本，它将所有具有特殊类的输入转换为一个滑块。

// Create Jquery-ui Slider
$(".create_slider").after('<div class="slider"></div>');
//
$(".slider").slider({
    value: $(this).siblings("input").val(),
    min: $(this).siblings("input").data("min"),
    max: $(this).siblings("input").data("max"),
    slide: function (event, ui) {
        $(this).siblings("input").val(ui.value);
    }
});

html是：

<td>
    <input type="text" value="11" id="jpeg_compression" name="jpeg_compression" data-min="0" data-max="100" class="regular-text create_slider" readonly="">
    <div class="slider"></div>
    <p class="description"></p>
</td>

但是 value-min-max 根本不起作用。$(this).siblings("input").data("min")不工作！

我有点理解为什么它不起作用，但是解决方案是什么？

我通过使用 create 解决了价值问题：

                            //
                            //
                            // Create Jquery-ui Slider
                            $(".create_slider").after('<div class="slider"></div>');
                            //
                            $(".slider").slider({
                              min: $(this).siblings("input").data("min"),
                              max: $(this).siblings("input").data("max"),
                              slide: function(event, ui) {
                                $(this).siblings("input").val(ui.value);
                              },
                              create: function(event, ui){
                                $(this).slider('value',$(this).siblings("input").val());
                              }
                            });
4

2 回答 2

0

从您几乎可以工作的解决方案开始，您也可以将create函数用于其他参数。

您可以使用http://api.jqueryui.com/slider/#option-maxmin设置和max作为选项

代码：

// Create Jquery-ui Slider
$(".create_slider").after('<div class="slider"></div>');
//
$(".slider").slider({
    slide: function (event, ui) {
        $(this).siblings("input").val(ui.value);
    },
    create: function (event, ui) {
        $(this).slider("option", "min", $(this).siblings("input").data("min"));
        $(this).slider("option", "max",  $(this).siblings("input").data("max"));
        $(this).slider('value', $(this).siblings("input").val());
    }
});

演示：http: //jsfiddle.net/IrvinDominin/HZqA7/

于 2013-09-13T15:12:48.120 回答
0

minandmax选项采用数字，但您的属性data-以字符串形式返回。

您必须转换它们的值，例如使用parseInt()：

$(".create_slider").after('<div class="slider"></div>');
var $siblings = $(this).siblings("input");
$(".slider").slider({
    value: $siblings.val(),
    min: parseInt($siblings.data("min"), 10),
    max: parseInt($siblings.data("max"), 10),
    slide: function(event, ui) {
        $siblings.val(ui.value);
    }
});
于 2013-09-13T14:25:24.847 回答