jQuery UI Slider - 如何在页面中使用多个滑块

Question

我正在尝试使用 jquery ui 滑块创建多个滑动条。问题是只有当在其他条上滑动时，最后一个条中的值才会发生变化。 当在另一个滑动条上滑动时，仅最后一个滑动条的值发生变化。 小提琴链接

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

关键字中。当您通过

ids

关键字在

for

循环中分配变量

var

时，并不意味着您创建了

i

数量的

ids

。不，先生。实际上，您创建了一个变量

ids

，稍后在循环的每次迭代中重新分配该变量。这称为变量提升（这是另一篇关于它的文章）。

您的

console.log

在每次迭代中显示

ids

变量的值。但这并不意味着

slider

处理程序引用了

ids

的不同值。又不行了。在这段代码中：

$(ids + ' .ui-slider-handle:eq(0) .price-range-min')

-

ids

引用某个特定变量（RAM 中的某个单元格），在所有循环迭代之后，该变量包含

'#id4-range'

字符串。所以你总是会更新最后一个滑块。

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

那么，如何获得所需的行为呢？一种方法是在声明 let

 时简单地使用 

var 关键字而不是

ids

。这是ES6（你最好多读一下它，它超级方便），所以你可能会遇到浏览器不兼容的情况（babel会帮助你解决这个问题）。另一种（错误，请参阅下面的评论）方法是将完整的选择器字符串路径保存在一个

array

变量中，或者只是继续使用已经存在的

search_type

，如下所示：

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

这里是您的示例，稍作修改（

let

改为

var

之前的

ids

）

编辑：

如果您想在不使用

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]);
}

Answer 2

这是我的简洁版本

<div id="id-slider1"></div>
<div id="id-slider2"></div>
<div id="id-slider3"></div>

$(document).ready(function() {
   $("[id^=id]").each(function(indx, element) {
       var id_range = $(this).attr('id');
                
       $('#'+id_range).slider({
         range: "min",    
         value: 50,
         slide: function( event, ui ) {
            //my custom code
            $('#line-'+indx).outerWidth( ui.value + "%" );
         }
       });
   });
});