Question

我尝试使用http://refreshless.com/nouislider/创建具有不同类名或ID的多个滑块，以便后端功能可以使用它们各自的值。我可以为每个滑块编写一个具有不同输入的新函数，但这会重复我自己。我认为这可能是$（this）的合适情况，但我不太清楚如何使用它。如果它可以在handlebars.js完成，这将使我的一天。

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

这是我的创建滑块功能：

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>

谢谢

Answer 1

您可以创建多个元素，只需按其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>

Answer 2

如何处理车把模板？

        <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
});

使用jQuery创建具有不同类名或ID的多个元素

2 个答案: