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

kd3sttzy 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(126)

我正在尝试使用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>');
}

个字符

jquery

来源：https://stackoverflow.com/questions/41545388/jquery-ui-slider-how-to-use-multiple-sliders-in-a-page

2条答案

按热度按时间

weylhg0b1#

这种行为的原因是var关键字。当你通过var关键字在for循环中分配变量ids时，这并不意味着你创建了ids的i数量。不，先生。实际上你创建了一个变量ids，在循环的每次迭代中，你都要重新分配它。这将调用variable hoisting（这里有另一个article）。
您的console.log在每次迭代中显示ids变量的值。但这并不意味着slider处理程序引用了ids的不同值。在这段代码中：$(ids + ' .ui-slider-handle:eq(0) .price-range-min')-ids引用一个特定的变量（RAM中的一个特定单元格），在所有循环迭代之后包含'#id4-range'字符串。因此，您将始终更新最后一个滑块。
你可能会问：* “那么为什么所有的滑块都被创建了，而不仅仅是最后一个？“*。这是因为滑块在每次迭代中只创建一次。您在特定节点上设置侦听器，之后它们将始终附加到该节点。
那么，你如何获得所需的行为呢？一种方法是在声明ids时使用let关键字而不是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]);
}

型

赞(0）回复(0）举报 2023-08-04

bogh5gae2#

$(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 + "%" );
         }
       });
   });
});

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

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

2条答案

相关问题

热门标签

最新问答