jQuery UI Slider 更新步骤属性但不起作用答案

【问题标题】：jQuery UI Slider updating step attribute but not workingjQuery UI Slider 更新步骤属性但不起作用
【发布时间】：2019-06-27 18:07:20
【问题描述】：

我正在使用一个名为 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>

【问题讨论】：

不确定这实际上是一个 JQueryUI 小部件。可能想要删除该标签。
阅读您找到的该插件的文档，我不确定您是否可以在初始设置后更改诸如 step 之类的选项。它似乎没有这样做的方法（仅更改标记属性通常不是您更改 JQuery 小部件选项的方式，因为我们不知道代码如何使用这些属性，如果有的话。您通常会做类似$(widgetSelector).slider( 'step', 1 );）的事情。您可能想查看 JQueryUI，这是 JQuery 的官方 UI 插件集。我知道他们的滑块能够在初始创建后设置步长。
step 可以使用更新方法进行更新。 github.com/thecreation/jquery-asRange/blob/master/src/…jsfiddle.net/rqk0297t源通常是最好的文档。
@KevinB 你太棒了！你是对的，应该先检查源。但真的很感谢这个。但这又产生了另一个问题，现在气泡显示的是 NaN 而不是范围值。您可以查看网站链接。知道是什么原因造成的吗？
好的，刚刚更新了条件语句$(".range-slider").asRange('update', {value:val}); 上的值，它正在工作！尽管所有这些变通办法都使代码虚张声势，但也许我应该选择@dqhendricks 提到的普通滑块。但无论如何，非常感谢您的帮助。

标签： javascript jquery html jquery-ui-slider

【解决方案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 创建的对象将不会被反映。

【讨论】：

我明白了。这是可行的解决方案，但它为价值泡沫提供了 NaN。因此，只需在每个条件语句中添加 $(".range-slider").asRange('update', {value:val}); 即可解决问题。