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

Question

I'm trying to create multiple sliders with different class names or IDs using http://refreshless.com/nouislider/ so that their individual value can be used by backend functionality. I could write a new function with different inputs for each slider but that would be repeating myself. I think this might be an appropriate situation for $(this) but I'm not too sure how to use it. If it could be done in handlebars.js that would make my day.

Noob question I know, but I can seem to find an appropriate answer or tutorial through my searches, which is probably due to not knowing the appropriate terminology.

Here's my create slider function:

this.prefSlider = function () {

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

And here's the html rendering it:

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

Thank you

Answer 1

You can create multiple elements and just call them by their id and not the class

$("#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

how's this for a handlebars template?

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

then the js would use the slider name to identify it to the backend:

$('[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
});