jQueryのスライダー - スライド：機能（イベント、UI）ループ

のために、私は2（またはそれ以上）との単純なコードを持っているjQueryのスライダー：jQueryのスライダー - スライド：機能（イベント、UI）ループ

HTML：

<label for="ST">ST:</label> 
<input type="text" id="ST" value="10"> 
<div id="slider-ST"></div>   

<label for="DX">DX:</label> 
<input type="text" id="DX" value="10"> 
<div id="slider-DX"></div>

とJS：

$function(){  
$("#slider-ST").slider({ 
    orientation: "horizontal", 
    range: "min", 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,"#ST");} 
}); 


$("#slider-DX").slider({ 
    orientation: "horizontal", 
    range: "min", 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,"#DX");} 
}); 

function sliderChange(t, disp) 
{ 
    $(disp).val(t.value); 
}; 
}

これは完璧に機能します。

さて、私はそれがよりよいようにしたいと私はforループでこれらの関数を呼び出すしたいと思います：jsfiddleでも利用可能

$function(){ 
var ID_Inp = ["#slider-ST", "#slider-DX"];  
var ID_Sli = ["#ST", "#DX"];  
var i; 
for (i=0;i<ID_Inp.length;i++) 
{ 
    $(ID_Inp[i]).slider({ 
    orientation: "horizontal", 
    range: "min", 
    min: 1, 
    max: 18, 
    value: 10, 

    slide: function (event, ui) {sliderChange(ui,ID_Sli[i]);} 
    }); 
}; 
function sliderChange(t, disp) 
{ 
    $(disp).val(t.value); 
}; 
}

簡体コード：

working

not working (using for loop)

何が起こるかは、iが変更後に2に設定されていることです。スライダーの値と明らかに関数sliderChangeが正しく機能しません（ID_Sli [i]はで、定義されていません）。

アイデア？ Forループ

出典

2017-07-05 Marcin Gałązka

あなたのために働いているJSFiddleを与えることができます、このコードは動作していないようです！ –

単純なjsfiddleの例でコードを更新しました。 –

slide：function（event、ui）{alert（ '＃' + ID_Sli [i]）; }、ID_Sli [i]の値をスライダの関数の中に出力すると、#undefinedが出力されます。つまり、Name配列は内部関数からアクセスできません。したがって、入力ボックスを更新することはできません。 –

を読みますこのような状況ではforループを使用する必要がありますが、これは単純化できます。あなたは、個々の事業部のスライダに&入力をカプセル化する場合は、Govindのアイデアに拡大：

<div id="bedsSection"> 
    <input type="text" id="amountbeds"> 
    <div id="slider-range-max-beds"></div> 
</div>

が同じイベントを使用して、これに続いて、あなたは、関連する入力を見つけるために親を照会することができます。それに応じて更新します。

$("#slider-range-max-beds, #slider-range-max-cars").slider({ 
     range: "max", 
     value: 2, 
     slide: function(event, ui) { 
       var input = $(this).parent().find("input"); 
       input.val(ui.value); 

      //Could also be written as $(this).parent().find("input").val(ui.value); 
     } 
});

出典

2017-07-05 09:58:30 Joel

は、このための良いオプションではありません、私はあなたが以下のように行うために必要があると思う：詳細については

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script> 
 
    $(function() { 
 
    $("#slider-range-max-cars,#slider-range-max-beds").slider({ 
 
     range: "max", 
 
     value: 2, 
 
     slide: function(event, ui) { 
 
     $("#amountcars").val($("#slider-range-max-cars").slider("value")); 
 
     $("#amountbeds").val($("#slider-range-max-beds").slider("value")); 
 
     } 
 
    }); 
 
    $("#amountcars").val($("#slider-range-max-cars").slider("value")); 
 
    $("#amountbeds").val($("#slider-range-max-beds").slider("value")); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <label for="beds">Minimum number of bedrooms:</label> 
 
    <input type="text" id="amountbeds"> 
 
    <div id="slider-range-max-beds"></div> 
 

 
    <p> 
 
    <label for="cars">Minimum number of cars:</label> 
 
    <input type="text" id="amountcars"> 
 
    <div id="slider-range-max-cars"></div> 
 
    <div id="debug"> 
 

 
    </div> 
 
</body> 
 

 
</html>

私がなぜわからないdocumention

出典

2017-07-05 09:43:33

親愛なるRamakanthは、あなたの答えをありがとう。これらのおかげで、私はうまく機能コード（及び種類-のためを使用していますので、私は手動で初期化フェーズでIDを入力する必要はありません）をコンパイル：

<div class="params"> <div id="STSection"> <label for="ST">Strength:</label> <input type="text" id="ST" value="10"> <div id="slider-ST" style="width:300px;"></div> </div> <div id="DXSection"> <label for="DX">Dexterity:</label> <input type="text" id="DX" value="11"> <div id="slider-DX" style="width:300px;"></div> </div>

とJS：

$('.params div').each(function() { $(this).find("div").slider({ value: $(this).find("input").val(), orientation: "horizontal", slide: function(event, ui) { $(this).parent().find("input").val(ui.value); } }); });

私が理解するために最も重要な部分は、.each（）でdivセクションに埋め込まれているとどう対処するかでした。次に明らかにparent（）とfind（）を使用すること。それらは本当に役立ちます！

ありがとうございました！

出典

2017-07-05 13:33:40

jQueryのスライダー - スライド：機能（イベント、UI）ループ

答えて

関連する問題