jQuery UI Slider - ページ内に複数のスライダを使用する方法

Question

jquery UIスライダを使用して複数のスライドバーを作成しようとしています。問題は、最後のバーの値の変更だけです。 他のスライドバー値のスライドが最後のバーでのみ変化した場合。 Fiddle link

function collision($div1, $div2) { 
 
     var x1 = $div1.offset().left; 
 
     var w1 = 40; 
 
     var r1 = x1 + w1; 
 
     var x2 = $div2.offset().left; 
 
     var w2 = 40; 
 
     var r2 = x2 + w2; 
 
     
 
     if (r1 < x2 || x1 > r2) return false; 
 
     return true; 
 
     
 
    } 
 
    
 
// // slider call 
 
var search_type = ['id1','id2','id3','id4']; 
 
for(var i = 0; i<search_type.length; i++){ 
 
var ids = '#' + search_type[i] + '-range'; 
 
var $this = '#'+search_type[i]+'-c'; 
 
console.log($this); 
 
console.log(ids); 
 
$(ids).slider({ 
 
\t range: true, 
 
\t min: 0, 
 
\t max: 500, 
 
\t values: [ 75, 300 ], 
 
\t slide: function(event, ui) { 
 
\t \t 
 
\t \t $(ids +' .ui-slider-handle:eq(0) .price-range-min').html(ui.values[ 0 ]); 
 
\t \t $(ids +' .ui-slider-handle:eq(1) .price-range-max').html(ui.values[ 1 ]); 
 
\t \t $(ids +' .price-range-both').html('<i>' + ui.values[ 0 ] + ' - </i>' + ui.values[ 1 ]); 
 
\t \t console.log(ids +' .ui-slider-handle:eq(1) .price-range-max'); 
 
\t \t // 
 
\t \t 
 
    if (ui.values[0] == ui.values[1]) { 
 
     $(ids+' .price-range-both i').css('display', 'none'); 
 
    } else { 
 
     $(ids+' .price-range-both i').css('display', 'inline'); 
 
    } 
 
     
 
     // 
 
\t \t 
 
\t \t if (collision($('.price-range-min'), $('.price-range-max')) == true) { 
 
\t \t \t $(ids +' .price-range-min,'+ ids+ ' .price-range-max').css('opacity', '0'); \t 
 
\t \t \t $(ids +' .price-range-both').css('display', 'block'); \t \t 
 
\t \t } else { 
 
\t \t \t $(ids +' .price-range-min,'+ ids+ ' .price-range-max').css('opacity', '1'); \t 
 
\t \t \t $(ids +' .price-range-both').css('display', 'none'); \t \t 
 
\t \t } 
 
\t \t 
 
\t } 
 
}); 
 

 
$(ids +' .ui-slider-range').append('<span class="price-range-both value"><i>' + $(ids).slider('values', 0) + ' - </i>' + $(ids).slider('values', 1) + '</span>'); 
 

 
$(ids +' .ui-slider-handle:eq(0)').append('<span class="price-range-min value">' + $(ids).slider('values', 0) + '</span>'); 
 

 
$(ids +' .ui-slider-handle:eq(1)').append('<span class="price-range-max value">' + $(ids).slider('values', 1) + '</span>'); 
 
}

<br> 
 
\t <input type="textbox" id="id1-min"> 
 
\t <input type="textbox" id="id1-max"> 
 
\t <p>&nbsp;</p> 
 
\t <div id="id1-range"></div> 
 
<p>&nbsp;</p> 
 
\t <input type="textbox" id="id2-min"> 
 
\t <input type="textbox" id="id2-max"> 
 
\t <p>&nbsp;</p> 
 
\t <div id="id2-range" data-max="800"></div> 
 
<p>&nbsp;</p> 
 
\t <input type="textbox" id="id3-min"> 
 
\t <input type="textbox" id="id3-max"> 
 
\t <p>&nbsp;</p> 
 
\t <div id="id3-range" data-max="800"></div> 
 
\t <p>&nbsp;</p> 
 
\t <input type="textbox" id="id4-min"> 
 
\t <input type="textbox" id="id4-max"> 
 
\t <p>&nbsp;</p> 
 
\t <div id="id4-range" data-max="800"></div>

Answer 1

、このような行動の理由はvarキーワードです。変数idsをキーワードを使用してforループに割り当てた場合、という数字をi作成するとは限りません。いいえ。実際には、1つの変数idsを作成します。ループの各反復で後で再割り当てします。これはvariable hoistingを呼び出します（これについてはarticleです）。

console.logは、各繰り返しで値がidsであることを示しています。しかし、sliderハンドラがidsの異なる値を参照していることを意味するわけではありません。もう一度。このコードでは、$(ids + ' .ui-slider-handle:eq(0) .price-range-min')-idsという特定の変数（RAM内の1つの特定のセル）への参照があります。すべてのループ反復の後には、'#id4-range'文字列が含まれています。したがって、最後のスライダは常に更新されます。

質問するかもしれません："なぜ、すべてのスライダが作成され、最後のものだけではないのですか？"。これはスライダーが各反復で一度だけ作成されるためです特定のノードでリスナーを設定した後、リスナーは常にそのノードにアタッチされます。

これで、どのようにして必要な動作を得ることができますか？ 1つの方法は、idsを宣言するときにvarの代わりにletキーワードを単に使用することです。これはES6です（これについてはよく読んでください、それは便利です）ので、ブラウザの非互換性があります（babelがこれに役立ちます）。もう一つ（間違って、の下のコメントを参照）の方法は、1つのarray変数に完全なセレクタ文字列パスを保存することです、または単にそのような既存のsearch_typeを使い続ける：

$('#' + search_type[i] + '-range .ui-slider-handle:eq(0) .price-range-min').html(ui.values[0]); 

Hereは少し修正（letとあなたの例であります代わりにvar

）ids前EDIT：

あなたがusinせずにそれに対処したい場合g letたとえば、関数createSliderを作成する必要があります。

function createSlider(rawId){ 
    var id = '#' + rawId + '-range'; 
    console.log(id); 
    $(id).slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [75, 300], 
     slide: function(event, ui) { 

      $(id + ' .ui-slider-handle:eq(0) .price-range-min').html(ui.values[0]); 
      $(id + ' .ui-slider-handle:eq(1) .price-range-max').html(ui.values[1]);  

    // and so on... 

} 

単純にループの反復ごとにこの関数を呼び出し、そのような引数としてsearch_type[i]を渡す：：次の操作を行いますあなたはどちらコンソールをチェックしてくださいすることができ

for (let i = 0; i < search_type.length; i++) { 
    createSlider(search_type[i]); 
}