jquery - 使用 jQuery UI slider 自定义范围/变量集

Question

我想看看是否可以制作一个自定义数据集以与 jQuery UI Slider 一起使用。我正在开发一个网站，其服装尺码范围为:[0、2、4、6、8、10、12、14、16、18、16W、18W、20W]

我遇到的问题是在 18 岁之后出现的，当时它跳到了有点独特的“宽”尺寸。

在添加 16W、18W 和 on 尺寸之前，我使用以下代码创建了一个工作 slider :

$("#slider-size .slider").slider({
  min: 0,
  max: 18,
  step: 2,
  slide: function(event, ui) {
    $(".rsize").text(ui.value);
  }
});

当 slider 更改时，该函数中的最后一个参数会更改文本值。

有人知道如何将 16W、18W 等添加到此列表的末尾吗？

谢谢!

Answer 1

对于自定义尺寸，您可以使用另一个数组作为标签:

var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"];
$("#slider-size .slider").slider({
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $(".rsize").text(sizes[ui.value]);
  }
});

现在，要添加或删除尺寸，只需修改 size 数组即可。