javascript - jQuery UI Slider - 如何在页面中使用多个 slider

Question

我正在尝试使用 jquery ui slider 创建多个滑动条。问题是只有当在其他条上滑动时，最后一个条中的值才会发生变化。当在另一个滑动条上滑动时，仅最后一个滑动条的值发生变化。 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({
	range: true,
	min: 0,
	max: 500,
	values: [ 75, 300 ],
	slide: function(event, ui) {
		
		$(ids +' .ui-slider-handle:eq(0) .price-range-min').html(ui.values[ 0 ]);
		$(ids +' .ui-slider-handle:eq(1) .price-range-max').html( ui.values[ 1 ]);
		$(ids +' .price-range-both').html('<i>' + ui.values[ 0 ] + ' - </i>' + ui.values[ 1 ] );
		console.log(ids +' .ui-slider-handle:eq(1) .price-range-max');
		//
		
    if ( ui.values[0] == ui.values[1] ) {
      $(ids+' .price-range-both i').css('display', 'none');
    } else {
      $(ids+' .price-range-both i').css('display', 'inline');
    }
        
        //
		
		if (collision($('.price-range-min'), $('.price-range-max')) == true) {
			$(ids +' .price-range-min,'+ ids+ ' .price-range-max').css('opacity', '0');	
			$(ids +' .price-range-both').css('display', 'block');		
		} else {
			$(ids +' .price-range-min,'+ ids+ ' .price-range-max').css('opacity', '1');	
			$(ids +' .price-range-both').css('display', 'none');		
		}
		
	}
});

$(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>
	<input type="textbox" id="id1-min">
	<input type="textbox" id="id1-max">
	<p>&nbsp;</p>
	<div id="id1-range"></div>
<p>&nbsp;</p>
	<input type="textbox" id="id2-min">
	<input type="textbox" id="id2-max">
	<p>&nbsp;</p>
	<div id="id2-range" data-max="800"></div>
<p>&nbsp;</p>
	<input type="textbox" id="id3-min">
	<input type="textbox" id="id3-max">
	<p>&nbsp;</p>
	<div id="id3-range" data-max="800"></div>
	<p>&nbsp;</p>
	<input type="textbox" id="id4-min">
	<input type="textbox" id="id4-max">
	<p>&nbsp;</p>
	<div id="id4-range" data-max="800"></div>

Answer 1

这种行为的原因在于var关键字。当您通过 var 关键字在 for 循环中分配变量 ids 时，并不意味着您创建了 i 数量的id。不，先生。实际上，您创建了一个变量 ids，稍后在循环的每次迭代中重新分配该变量。这调用variable hoisting (这是另一个关于它的 article)。

您的 console.log 显示每次迭代时 ids 变量的值。但这并不意味着 slider 处理程序引用不同的 ids 值。又不行了。在这段代码中: $(ids + ' .ui-slider-handle:eq(0) .price-range-min') - ids 对某个特定的引用变量(RAM 中的某个单元)，在所有循环迭代之后包含 '#id4-range' 字符串。因此您将始终更新最后一个 slider 。

您可能会问:“为什么创建所有 slider 而不仅仅是最后一个？”。那是因为 slider 在每次迭代中仅创建一次。您在特定节点上设置监听器，之后它们将始终附加到该节点。

那么，如何获得所需的行为呢？一种方法是简单地使用 let声明 ids 时使用关键字代替 var。这是ES6 (你最好阅读很多相关内容，它非常方便)，因此你可能会遇到浏览器不兼容的情况( babel 将帮助你解决这个问题)。另一种(错误，请参阅下面的评论)方法是将完整的选择器字符串路径保存在一个array变量中，或者只是继续使用现有的search_type，例如所以:

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

Here是您的示例，稍作修改(在 ids 之前使用 let 代替 var)

编辑:

如果您想在不使用 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]);
}