Question

我有一个滑块，当我拖动它时，它会将值发送到特定的href

$(function() {
  $('.slider-a').slider({
    value: 50,
    min: 3,
    max: 100,
    step: 1,
    slide: function(event, ui){
      $('.dl-link').attr('href', '/download/' + ui.value + '/');
    }
  });
});

当我将滑块拖动到60时：

<a href="/download/60/">link</a>

当我有一个滑块时，这很有效，但我怎样才能发送2个滑块的值？

第二个滑块：

$(function() {
  $('.slider-b').slider({
    value: 80,
    min: 1,
    max: 99,
    step: 1,
    slide: function(event, ui){
      $('.dl-link').attr('href', '/download/' + ui.value FROM FIRST SLIDER + '/' + ui.value + '/');
    }
  });
});

最终链接应如下所示：

<a href="/download/60/55/">link</a>

感谢

Answer 1

试试这个。我只是保存ui.value值，然后根据保存的值构建URL。

var firstslider = 50;
var secondslider = 80;
$(function() {
  $('.slider-a').slider({
    value: 50,
    min: 3,
    max: 100,
    step: 1,
    slide: function(event, ui){
      firstslider = ui.value;
      $('.dl-link').attr('href', '/download/' + firstslider + '/' + secondslider + '/');
    }
  });
});
$(function() {
  $('.slider-b').slider({
    value: 80,
    min: 1,
    max: 99,
    step: 1,
    slide: function(event, ui){
      secondslider = ui.value;
      $('.dl-link').attr('href', '/download/' + firstslider + '/' + secondslider + '/');
    }
  });
});

Answer 2

您可以使用$(selector).slider('option', 'value')检索滑块的值。

因此，第二个滑块的slide回调可以是：

Example Here

slide: function(event, ui) {
  var sliderAValue = $('.slider-a').slider('option', 'value');
  $('.dl-link').attr('href', '/download/' + sliderAValue + '/' + ui.value + '/');
}

jQuery将ui.value从2个滑块发送到href

2 个答案: