如何动态实现ionRangeSliders

Question

我已经实现了ionRangeSlider，以便通过滑块向用户展示一些值。要实现滑块，我们必须声明这样的输入标记，

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

之后，我们必须通过jquery调用输入标记的id以获得滑块。

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

例如，它可以正常工作。有时，我必须根据数据库内容实现多个滑块才能显示值。但是这一次它不能工作，因为对于每个输入标记，我们必须调用标签的id才能得到滑块。

我通过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条件是否运行了一次而不是问题，但是如果这个条件运行了不止一次，那么它将是一个问题。这是根据数据库内容动态运行的语句。所以，我不能说准确的滑块计数。

我要动态创建银粉。

如何解决这个问题。(我想你也许能理解我的意思。如果没有，请在下面留下评论。)

Answer 1

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

科德芬