13

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

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

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

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

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

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

谢谢！

4

2 回答 2

34

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

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

现在，要添加或删除大小，只需修改sizes数组。

于 2010-07-26T16:27:09.783 回答
7

演示

$("#slider-size .slider").slider({
  min: 0,
  max: 24, // max is 24
  step: 2,
  slide: function(event, ui) {
    var s = ui.value;
    switch(ui.value) {
       case 20:
         s = '16W';
         break;
       case 22:
         s = '18W';
         break;
       case 24:
         s = '12W';
         break;
    }
    $(".rsize").text(s);
  }
});

- - - 或者 - - -

演示

$("#slider-size .slider").slider({
  min: 0,
  max: 24, // max is 24
  step: 2,
  slide: function(event, ui) {
      $(".rsize").text((ui.value >18)?(ui.value-4)+'W':ui.value);
  }
});​
于 2010-07-26T16:18:43.380 回答