Question

我正在使用Foundation Range Slider并希望收听更改事件，但仅限于值更改时。

不幸的是，在init和每次窗口更改时都会检测到两个更改。

示例（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可能是对的，这是一个错误，但有一个简单的解决方法。只需将dataContext.Database.SqlQuery<return Datatype>("name", null)之类的变量放在比回调更宽的范围内，并使用它来跟踪滑块的最新值。当sliderVal事件触发时，检查滑块值 - on_change - 是否与先前保存的值不同。如果没有，什么都不做;但如果值不同，则执行您想要的任何操作，并确保将$('div.range-slider').attr('data-slider')更新为新值。

这是实现此概念的jsFiddle。您会发现浏览器窗口更改时触发的重复事件或事件不会出现任何问题。

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

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
}

基金会滑块：如何判断价值是否发生了变化？

2 个答案: