So implementieren Sie ionRangeSliders dynamisch

Question

Ich habe ionRangeSlider implementiert, um Benutzern über Schieberegler einige Werte anzuzeigen. Zur Umsetzung eines Schiebers müssen wir eine Eingabe Tag wie folgt erklären,

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

danach müssen wir die ID des Eingangs-Tag über Jquery rufen Sie den Schieberegler zu erhalten.

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

Für einzelne Instanz funktioniert es gut. Manchmal muss ich mehr als einen Schieberegler nach Datenbankinhalt implementieren, um die Werte anzuzeigen. Aber dieses Mal wird es nicht funktionieren, weil wir für jedes Input-Tag die ID des Tags aufrufen müssen, um den Slider zu bekommen.

Ich Abrufen von Daten auf Seite über Ajax (weil mein Fall, ich habe die Daten über jquery zu holen, die Daten in Echtzeit zu zeigen, so habe ich es durch jquery zu tun, Ajax)

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

in sitePagefunction.php bin Echo i (für den demostration Zweck zeige ich nur die Dinge im Zusammenhang nur)

while(<condition>){ 

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

} 

Hier können Sie sehen, ob der während Zustand eine Zeit abläuft, als es nicht Problem sein wird, aber wenn Diese Bedingung läuft mehr als einmal, dass es ein Problem sein wird. Diese while-Anweisung wird dynamisch entsprechend dem Datenbankinhalt ausgeführt. Also kann ich nicht sagen, dass der exakte Schieberegler zählt.

Ich möchte Silders dynamisch erstellen.

So lösen Sie dieses Problem. (Ich glaube, Sie verstehen, was ich sage. Wenn nicht bitte einen Kommentar unten.)

Answer 1

HTML

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

JSaktualisiert

// 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