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

Martyna VA

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

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

  });

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。