将步骤数限制为第一个和最后一个数组元素

Limit number of steps to first and last array element

本文关键字：第一个 最后一个 数组元素      更新时间：2023-09-26

>我有一个值数组，可以通过操作滑块 ui 句柄或单击将值增加/减少一步的按钮来选择。问题是当它到达最后一个/第一个元素时，如果通过单击再添加一步，该值将变为空白。我正在寻找一种解决方案，通过数组中的元素数量或类似的东西来限制点击。

小提琴

.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>

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

$("#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]);
  });

小提琴

一些简单的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]);
    }
  });

小提琴

只是限制它：

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

小提琴

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

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

小提琴

或者，

或者另外，您可以跳过使用数组并动态构建文本（唯一的例外是省略"1 年"上的尾随 s）

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

相关文章：