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

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

最后的 link 应该是这样的：

<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 从 2 个滑块发送 ui.value 到 href

jQuery send ui.value from 2 sliders to a href

jquery

jquery-ui

slider

jquery-ui-slider