Question

Slider ui从数组中选择值（它也可以使用'plus'和'minus'按钮进行操作） - 但是它不会更新输入字段中的数字，直到鼠标被“未被点击”，这不是非常用户友好。

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

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

我在Fiddle找到了一个类似的解决方案，并尝试申请我的案例，但不成功。

添加的代码不起作用：

   var value = $(this).val(),
  button = $("#sup").val(sizes[ui.value]);
  setTimeout(function () { /* update text after jQM refreshes slider */
    button.text(custom[value]);
}, 0);

我不知道如何让它发挥作用。

Answer 1

要在滑动时更新值，您需要使用var result = executeMyCoolStringCommands(myStringVariableWithCommands);事件而不是slide事件

change

从数组更新滑块ui值

1 个答案: