0

我正在尝试使用http://refreshless.com/nouislider/创建具有不同类名或 ID 的多个滑块，以便后端功能可以使用它们的单独值。我可以为每个滑块编写一个具有不同输入的新函数，但这会重复我自己。我认为这可能是 $(this) 的合适情况，但我不太确定如何使用它。如果它可以在 handlebars.js 中完成，那会让我很开心。

我知道菜鸟问题，但我似乎可以通过搜索找到合适的答案或教程，这可能是由于不知道合适的术语。

这是我的创建滑块功能：

this.prefSlider = function () {

    $(".prefSlider").noUiSlider({
        start: [50],
        range: {
            'min': 0,
            'max': 100
        }
    });
    $('.prefSlider').Link('lower').to($('.prefLower'), 'text', wNumb ({
        decimals: 0
    }));
}

这是呈现它的html：

<div class="sliderBox">
                                <div class="prefSlider">
                                </div>
                                <div class="sliderValues">
                                    <span class="prefLower"></span>
                                </div>
                            </div>

谢谢

4

2 回答 2

0

您可以创建多个元素并通过它们的 id 而不是类来调用它们

$("#slider1").noUiSlider({
  start: [50],
  range: {
    'min': 0,
    'max': 100
  }
});

$("#slider2").noUiSlider({
  start: [50],
  range: {
    'min': 10,
    'max': 50
  }
});

<div id="slider1" class="sliderBox">
  <div class="prefSlider"></div>
  <div class="sliderValues">
    <span class="prefLower"></span>
  </div>
</div>

<div id="slider2" class="sliderBox">
  <div class="prefSlider"></div>
  <div class="sliderValues">
    <span class="prefLower"></span>
  </div>
</div>
于 2015-03-21T06:37:17.097 回答
0

车把模板怎么样？

        <div class="sliderBox">
            <div class="prefSlider" data-slider="one-handle-{{this.name}}"></div>
            <div class="sliderValues">
                <span class="prefLower"></span>
            </div>
        </div>

然后 js 将使用滑块名称将其识别到后端：

$('[data-slider]').on('change', function (event) {
    var element = this;//could use `event.target` instead of `this`.
    var $element = $(element);
    var name = $element.data('slider');
    var sliderIndex = $('[data-slider="' + name + '"]').index(element);//in case multiple sliders have the same name

    // use name, sliderIndex, and $element.val() as you wish
});
于 2015-06-03T00:52:29.083 回答