0

jquery-ui レンジ スライダーが非論理的に動作します。ここでスライダーの 1 つだけが機能する理由を説明できる人はいますか? 実際のページには 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グローバルであり、スライダーのオプションに整数ではなく文字列を渡しています。

$(".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');
        }
    });
});

フィドル

データ属性を使用してスライダーのオプションを設定することもできます。

于 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 に答える