Question

问题：我正在使用一个使用非常大的值的jQuery UI滑块（范围0-140,000;步骤20,000），并且我已经修改了在Stack Overflow上其他地方找到的解决方案来添加滑块的标签。但是，该代码（见下文）为140,000范围内的每个数字添加了一个标签。 是否有替代.each（）方法，只为每个x元素添加一个标签（我试图每20,000个值获得一个标签）？或者有人可以推荐一种更智能的方式要解决这个问题？

的Javascript ：

$( "#slider" ).slider({
    range: "min",
    value: 0,
    min: 0,
    max: 7,
    step: 1
})
.each(function() {

  //
  // Add labels to slider whose values 
  // are specified by min, max and whose
  // step is set to 1
  //

  // Get the options for this slider
  var opt = $(this).data().uiSlider.options;

  // Get the number of possible values
  var vals = opt.max - opt.min;

  // Space out values
  for (var i = 0; i <= vals; i++) {

    var el = $('<label>'+(i+1)+'</label>').css('left',(i/vals*100)+'%');

    $( "#slider" ).append(el);

  }

});

Answer 1

您应该在滑块选项中定义实际范围：

$("#slider").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 140000,
    step: 20000
})

然后使用step选项作为循环中的增量：

for (var i = 0; i <= vals; i += opt.step) {...}

这是 demo fiddle

结果代码：

$("#slider").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 140000,
    step: 20000
}).each(function () {
    //
    // Add labels to slider 
    //

    // Get the options for this slider
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Space out values
    for (var i = 0; i <= vals; i += opt.step) {
        var el = $('<label>' + i + '</label>').css('left', (i / vals * 100) + '%');
        $("#slider").append(el);
    }
});

jQuery .each（）替代方法，在UI滑块上找到每个第n个匹配的值

1 个答案: