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。

此外，如果我通过键盘手动更改输入框的值，滑块将跳转到该位置，因此存在某种链接。

正在使用的软件：

Ubuntu 14_04
铬
节点v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0

其他注意事项：

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

Answer 1

我认为这是您正在使用的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);
        }
    });
}

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

Answer 2

1）也许我错了......但你没有指定版本，你从Foundation v5给出一个例子......你没有安装Foundation v6吗？

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

2）包含js文件后，需要这样：

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

编辑：对不起，我第一次没有读完全部内容，可能问题是基金会使用＆＃34;值＆＃34; attribute，这是为<input>标记设计的属性： value <button>, <input>, <li>, <option>, <meter>, <progress>, <param>指定元素的值

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

Foundation Slider不会更新输入

2 个答案: