javascript - 将文本附加到 slider 文本 (display_selector)

Question

我正在尝试将 $ 符号附加到使用 Foundation.js 框架生成的 slider 标签，这里是 fiddle这是 HTML 代码:

<div class="row">
    <div class="small-10 medium-11 columns">
         <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
           <span class="range-slider-handle" role="slider" tabindex="0"></span>
             <span class="range-slider-active-segment"></span>
             </div>
         </div>
         <div class="small-2 medium-1 columns">
          <span id="sliderOutput3"></span>
            </div>
      </div>

当前标签从 id="sliderOutput3" 生成，并使用 data-slider data-options="display_selector: #sliderOutput3;" 传递

几个小时以来，我一直在尝试将 $ 符号添加到标签中，我们将不胜感激

Answer 1

理想情况下，on_change 方法可以像这样使用

$(document).foundation({
    slider: {
        on_change: function () {
            var value = $('.range-slider').attr('data-slider');
            $('#sliderOutput3').html(value + '$');
        }
    }
}).foundation('joyride', 'start');

但是这行不通。

从源代码看，它看起来像 foundation.js triggers on_change(source)然后 sets the value(source)到#sliderOutput。这意味着在 on_change 中对 #sliderOutput 所做的任何操作都将被覆盖。

你有两个选择

选项 1

有另一个带有 $ 符号的跨度。像这样

<div class="small-2 medium-1 columns"> 
  <span id="sliderOutput3"></span>
  <span>$</span>
</div>

这是一个演示 http://jsfiddle.net/dhirajbodicherla/z3h8gzqb/2/

选项 2

像这样在 on_change 方法中使用 settimeout

on_change: function () {
  var value = $('.range-slider').attr('data-slider');
  setTimeout(function () {
    $('#sliderOutput3').html(value + '$');
  }, 0);
}

这是一个演示 http://jsfiddle.net/dhirajbodicherla/z3h8gzqb/4/

我个人会推荐选项 1。选项 2 会起作用，但会有延迟，而且感觉不对。