javascript - 如何动态实现 ionRangeSliders

Question

我已经实现了ionRangeSlider通过 slider 向用户显示一些值。要实现 slider ，我们必须声明一个像这样的输入标签，

<input type="text" id="range_26" />

之后我们必须通过jquery调用输入标签的id来获取 slider 。

$("#range_26").ionRangeSlider({
  type: "single",
  grid: true,
  min: 0,
  max: 100,
  postfix: "%",
  onFinish: function(data) {
    $.ajax({
        //ajax content
    });
  }
)};

对于单个实例，它工作正常。有时我必须根据数据库内容实现多个 slider 来显示值。但这一次它不起作用，因为对于每个输入标签，我们都必须调用标签的 id 来获取 slider 。

我通过ajax获取数据到页面(因为我的情况我必须通过jquery获取数据以显示实时数据，所以我必须通过jquery，ajax来完成)

$.ajax({
url: 'sitePagefunction.php',
type: 'post',
data: { 'sitePageId' : sitepageid },
success:function(data) {
    $('#ul-devices-2').html(data);
)};

在 sitePagefunction.php 中，我正在回显(出于演示目的，我仅显示相关内容)

while(<condition>){

echo   '<div class="inputRange">
          <input type="text" id="range_26" />
        </div>';

}

在这里你可以看到，如果 while 条件运行一次就不会出现问题，但如果这个条件运行多次就会出现问题。这个 while 语句根据数据库内容动态运行。所以，我不能说确切的 slider 数。

我想动态创建silders。

如何解决这个问题。 (我想你可能明白我在说什么。如果不明白，请在下面留言。)

Answer 1

HTML

<div class="wrap"></div>

JS 已更新

// append html dynamically
for(var i = 1; i < 5; i++) {
  $('<div><input type="text" class="my-class" data-min="'+ (i * 4) +'" data-max="'+ (i * 8) +'" /></div>')
    .appendTo($('.wrap'));
}

$(".my-class").ionRangeSlider({
  type: "single",  
  grid: true,
  min: $(this).data('min'),
  max: $(this).data('max')  
});

Codepen