Foundation Slider 不更新输入

Question

在 this page 上有一个滑块更新带有示例 HTML 代码的输入框。您还可以在源代码中看到相同的代码。

我想在我的应用程序中使用它，所以我将它移植到我的代码中并将其转换为 Jade（又名 Pug）。源现在看起来像：

    div.row
        div.small-10.columns
            div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
                span.range-slider-handle(role="slider" tabindex="0")
                span.range-slider-active-segment
        div.small-2.columns
            input(type="number" id="days-off-count" value="28")

结果 html 看起来像这样（在美化之后）：

<div class="row">
  <div class="small-10 columns">
    <div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
      <span role="slider" tabindex="0" class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <input type="number" id="days-off-count" value="28">
  </div>
</div>

这与文档中显示的非常接近。 但是在生成的页面上，输入框没有更新。如果我将输入框更改为跨度，如 'With Label' 它更新的示例。

span(id="days-off-count" value="28")

变成

<span id="days-off-count" value="28"></span>

我在页面底部包含 foundation.js 和 .slider.js。

此外，如果我通过键盘手动更改输入框的值，滑块将跳到该位置，所以那里有某种link。

正在使用的软件：

Ubuntu 14_04
Chrome
节点 v0.10.25
快递 4.14.0
翡翠 1.11.0
基础 v5.5.0

其他注意事项：

该页面有多个滑块，因此任何 javascript 解决方案都需要考虑到这一点。

Answer 1

1) 也许我错了...但是你没有指定版本，你举了一个 Foundation v5 的例子...你没有安装 Foundation v6 吗？

试试这个例子：https://foundation.zurb.com/sites/docs/slider.html

2) 在包含你的 js 文件后，你需要有这个：

  <script>
    $(document).foundation();
  </script>

编辑：抱歉，第一次没看全，可能是基金会使用了"value"属性，这是为<input>标签设计的属性： value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> 指定元素的值

来源：https://www.w3schools.com/tags/ref_attributes.asp

Answer 2

我认为这是您使用的 Foundation (5.5.0) 版本中的错误 (hasOwnProperty instead of hasAttribute #6221)。似乎虽然它最初仅适用于 Firefox，但现在也适用于 Chrome。

来自 5.5.0 的带有（损坏的）滑块的示例：jsfiddle.net/tymothytym/jth99pkw/3

来自 5.5.3 的（工作）滑块示例：jsfiddle.net/tymothytym/tw1we8fk/3

错误已在此处修复：https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45

基本上，转到 foundation.slider.js 并更改它（第 157 行）：

if (settings.display_selector != '') {
    $(settings.display_selector).each(function(){
        if (this.hasOwnProperty('value')) { // this is the mistake / bug
            $(this).val(value);
        } else {
            $(this).text(value);
        }
    });
}

对此：

if (settings.display_selector != '') {
    $(settings.display_selector).each(function(){
        if (this.hasAttribute('value')) { // this should fix it
            $(this).val(value);
        } else {
            $(this).text(value);
        }
    });
}

这不是我的修复，它与补丁相同，但它应该意味着当您升级时您不需要修改您的应用程序代码来考虑解决方法。

Foundation Slider 不更新输入

Foundation Slider does not update input

zurb-foundation

pug