javascript - jQuery UI Slider 更新步骤属性但不工作

Question

我正在使用名为 asRange 的 jQuery 范围 slider 插件

它工作得很好，但是当我用条件语句更新 step 属性时，它更新了 DOM 中的值，但没有按预期工作。我需要当范围值小于 1 时步长值为“0.001”，当范围值大于 1 时步长为“1”。

如果您使用开发人员工具检查 DOM 元素，您会看到步长值正在正确更新，但没有正常工作。

我已经试了几个小时了。找不到任何东西。任何形式的帮助将不胜感激。

            <input class="range-slider" type="range" min="0.007" max="10" name="price" step="0.001" />
            <script>
              $(document).ready(function() {
                $(".range-slider").asRange();

                $(".range-slider").on('asRange::change', function (e) {
                var val = $(".range-slider").asRange('get');

                  if (val > 1) 
              {
                  $(".range-slider").attr("step" , "1");
              }
              else if (val <= 1) 
              {
                  $(".range-slider").attr("step" , "0.001");
              }


              });
              });
            </script>

Answer 1

改为使用库的更新方法:

$(document).ready(function() {
  $(".range-slider").asRange();

  $(".range-slider").on('asRange::change', function(e) {
    var val = $(".range-slider").asRange('get');

    if (val > 1) {
      $(".range-slider").asRange('update', { step: 1 }); // Here
    } else if (val <= 1) {
      $(".range-slider").asRange('update', { step: 0.001 }); // And Here
    }
  });
});

DOM 元素不再更新对象 asRange，那么，当您更改 DOM 元素时，asRange 创建的对象将不会反射(reflect)出来。