Foundation Slider：如何确定值是否发生了变化？

Question

我正在使用 Foundation Range Slider 并且想监听 change-event，但只有当 value 改变时 [=24] =].

不幸的是，在 init 上检测到两个变化，并且每次 window 也发生变化。

示例 (Fiddle):

<div class="range-slider" data-slider data-options="step: 20;">
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

<script>   
$(document).foundation({
  slider: {
      on_change: function(){
          console.log("changed");
          $("body").append("changed<br/>");
     }
   }
});
</script>

我找不到像 onValueChanged 这样的活动。任何想法如何尽可能干净地解决这个问题？我想避免变通办法。

Answer 1

Rory McCrossan 可能是正确的，这是一个错误，但有一个简单的解决方法。只需将 sliderVal 之类的变量保留在比回调更广泛的范围内，并使用它来跟踪滑块的最新值。当 on_change 事件触发时，检查滑块值 - $('div.range-slider').attr('data-slider') - 是否与之前保存的值不同。如果没有，什么也不做；但如果值不同，则执行您想要的任何操作并确保将 sliderVal 更新为新值。

这里有一个 jsFiddle 实现了这个概念。您会看到它没有任何问题，重复事件或浏览器 window 更改时触发的事件。

此外，如果您担心 sliderVal 不在全局范围内，您可以将其隐藏在闭包中。这是我避免全局变量的首选方法；我做了另一个 jsFiddle 来演示它 here. 这个版本在 window 第一次加载时也不会触发事件，所以我认为它解决了你所有的问题。

Answer 2

我在这个项目中使用了滑块：

yearinfocus.gettyimages.com

我用它来跟踪它的变化：

$('[data-slider]').on('change.fndtn.slider', callback);

在我的代码中，我缓存了这样的滑块元素：

s.slider.$main = $('.range-slider.')

在我的回电中，我检查了滑块的值，如下所示：

if(!isNaN(parseInt(s.slider.$main.attr('data-slider')-1))){
    var sliderIndex = parseInt(s.slider.$main.attr('data-slider')-1); //zero based
}