Question

我正在尝试使用jquery ui滑块创建多个幻灯片栏。问题是只有在其他栏上滑动时，最后一个栏中的值会发生变化。当另一个滑动条上的滑动值仅在最后一个条中更改时。 Fiddle link

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

那么，您如何获得所需的行为？一种方法是在声明var时简单地使用let关键字而不是ids。这是ES6（你最好阅读它，它非常方便），所以你可能会遇到浏览器不兼容（babel将帮助你）。另一个（错误，请参见下面的评论）方法是将完整的选择器字符串路径保存在一个array变量中，或者只是继续使用现有的search_type，如下所示：

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

Here是您的示例，稍加修改（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]); }

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

1 个答案: