Question

我有一个值数组，可以通过操纵滑块ui手柄或单击增加/减少值一步的按钮来选择。问题是当它到达last / first元素时，如果再单击添加一个步骤，则该值变为空白。我正在寻找一种解决方案，通过数组中的元素数量来限制点击次数。

JS

$(function () {
    var sizes = [
        "0 years",
        "1 year",
        "2 years",
        "3 years",
        "4 years",
        "5 years",
        "6 years",
        "7 years"
    ];

    $("#slider-range-max3").slider(
        {
            range: "max",
            min: 0,
            max: sizes.length - 1,
            step: 1,
            create: function(event, ui) {
                $("#sup").val(sizes[0]);
            },
            slide: function (event, ui) {
                $("#sup").val(sizes[ui.value]);
                $("#sup").text(sizes[ui.value]);
                var value = $(this).val(),
                button = $("#sup").val(sizes[ui.value]);
                setTimeout(function () {
                    /* update text after jQM refreshes slider */
                    button.text(custom[value]);
                }, 0);
            }
        }
    );

    $("#plus3").click(function () {
        var value = $("#slider-range-max3").slider("value");
        var step = $("#slider-range-max3").slider("option", "step");

        $("#slider-range-max3").slider("value", value + step);
        $("#sup").val(sizes[value+step]).text(sizes[value+step]);
    });

    $("#minus3").click(function () {
        var value = $("#slider-range-max3").slider("value")
        var step = $("#slider-range-max3").slider("option", "step");

        $("#slider-range-max3").slider("value", value - step);
        $("#sup").val(sizes[value-step]).text(sizes[value-step]);
    });
});

HTML

<div id="quote-input" class="slider-input">
    <div id="minus3" class="minus"><span>-</span></div>
    <div id="plus3" class="plus">+</div>
    <input type="text" id="sup" class="slider-value">

    <div id="slider-range-max3" class="slider">
    <span class="ui-slider-handle"></span>
</div>

Answer 1

一些简单的if将起作用：

 $("#plus3").click(function () {

    var value = $("#slider-range-max3").slider("value");
    var step = $("#slider-range-max3").slider("option", "step");

    if(value < (sizes.length-1)){
      $("#slider-range-max3").slider("value", value + step);
      $("#sup").val(sizes[value+step]).text(sizes[value+step]);
    }
  });

  $("#minus3").click(function () {

    var value = $("#slider-range-max3").slider("value")
    var step = $("#slider-range-max3").slider("option", "step");

    if(value){
      $("#slider-range-max3").slider("value", value - step);
      $("#sup").val(sizes[value-step]).text(sizes[value-step]);
    }
  });

Fiddle

Answer 2

它可以简单地检查函数内的数组长度

$("#plus3").click(function () {
    var value = $("#slider-range-max3").slider("value");
    var step = $("#slider-range-max3").slider("option", "step");

if (value === sizes.length-1)
return;//it bails out here in case


  $("#slider-range-max3").slider("value", value + step);
  $("#sup").val(sizes[value+step]).text(sizes[value+step]);

  });

fiddle

Answer 3

只是限制它：

if(value+step < sizes.length){
 $("#slider-range-max3").slider("value", value + step);
 $("#sup").val(sizes[value+step]).text(sizes[value+step]);
}


if(value-step > -1){
  $("#slider-range-max3").slider("value", value - step);
  $("#sup").val(sizes[value-step]).text(sizes[value-step]);
}

Fiddle

Answer 4

如果您只更改滑块更改事件内的文字而不是按钮本身，则不需要任何其他检查（滑块不会更改为无效范围）：< / p>

  var sizes = [ "0 years", "1 year", "2 years", "3 years", "4 years", "5 years", "6 years", "7 years" ];
  var slider = $("#slider-range-max3").slider({
    range: "max",
    min: 0,
    max: sizes.length - 1,
    step: 1,
    create: function(event, ui) {
      $("#sup").val(sizes[0]);
    },
    slide: updateText,
    change: updateText
  });

  function updateText(event, ui){
        $("#sup").val(sizes[ui.value]);
  }

  function Inc(step){
    slider.slider("value", slider.slider("value") + step);
  }

  $("#plus3").click(function () {
    Inc(1);
  });

  $("#minus3").click(function () {
    Inc(-1);
  });

Fiddle

或者或另外，您可以跳过使用数组并动态构建文本（唯一的例外是省略了＆＃39; 1年＆＃39;）

编辑为了完整起见，没有sizes数组的示例实现：https://jsfiddle.net/uq4eakah/7/

限制第一个和最后一个数组元素的步数

4 个答案: