使用 javascript 设置值时，基础范围滑块中断答案

【问题标题】：Foundation range slider breaking when using javascript to set_value使用 javascript 设置值时，基础范围滑块中断
【发布时间】：2014-07-18 17:50:17
【问题描述】：

我在同一页面上有 2 个范围滑块。其中一个包含在隐藏的 div 中。当我使用 javascript 设置第一个滑块的值时，第二个滑块坏了，不能正确拖动。请参阅下面的代码。重现问题

点击“隐藏下一个 div”（这会隐藏第二个滑块）
点击“将滑块 1 设置为 0”
点击“显示下一个 div”（显示第二个滑块）
尝试拖动滑块 2

代码笔演示： http://codepen.io/anon/pen/btalk

html

<div id="slider1" class="range-slider" data-slider data-options="step: 1;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

<button id="setZeroButton">set slider 1 to 0</button>
<button id="showButton">show next div</button>
<button id="hideButton">hide next div</button>

<div id="hidden-container">
 <div id="slider2" class="range-slider" data-slider data-options="step: 1;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
 </div>
</div>

$(document).foundation();

$('#setZeroButton').on('click', function() {
    $('#slider1').foundation('slider','set_value',0);
});
$('#showButton').on('click', function() {
    $('#hidden-container').show();
});

$('#hideButton').on('click', function() {
    $('#hidden-container').hide();
});

【问题讨论】：

标签： jquery slider zurb-foundation

【解决方案1】：

我最好的猜测是#slider2 的大小计算在它被隐藏和重新显示时会变得一团糟。似乎解决了在节目中再次初始化滑块的问题：

$('#showButton').on('click', function() {
    $('#hidden-container').show();
    $('#slider2').foundation('slider','set_value',0);
});

http://codepen.io/anon/pen/kyunr

为了避免显示按钮的陌生感，您可以简化一下：http://codepen.io/anon/pen/klivD

【讨论】：