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

Creating multiple elements with different class names or IDs using jQuery

本文关键字：ID 元素 同类 创建 jQuery 使用      更新时间：2023-09-26

我正在尝试使用创建多个具有不同类名或ID的滑块http://refreshless.com/nouislider/以便后端功能可以使用它们的单独值。我可以为每个滑块编写一个具有不同输入的新函数，但这将重复我自己。我认为这可能是一个适合$（this）的情况，但我不太确定如何使用它。如果它可以在handlers.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>

感谢

您可以创建多个元素，只需通过它们的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>

车把模板如何？

        <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
});
相关文章：