时间戳

首页 > 解决方案 > jQuery UI Slider 更新步骤属性但不起作用

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

问题描述

我正在使用一个名为asRange的 jQuery 范围滑块插件

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

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

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

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

标签： javascriptjqueryhtmljquery-ui-slider

解决方案

改用库的更新方法：

$(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 创建的对象。

推荐阅读