如何動態實現ionRangeSliders

我已經實現了ionRangeSlider以通過滑塊向用戶顯示一些值。從那之後，實現滑塊我們必須聲明這樣的輸入標籤，如何動態實現ionRangeSliders

<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語句根據數據庫內容動態運行。所以，我不能說確切的滑塊數量。

我想動態創建silders。

如何解決這個問題。（我想你可以理解我在說什麼。如果不是請在下面發表評論。）

來源

2016-08-26 Thanoo

爲什麼你沒有使用'class'而不是'id'？ –

我試過，但它沒有工作..這個滑塊只爲ids – Thanoo

工作我害怕，但你錯了，我在我最近的項目中使用這個插件。你能提供'jsfiddle'嗎？ –

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

來源

2016-08-26 07:11:55

謝謝..這是工作。但每個滑塊都有自己的值。如何爲每個滑塊顯示它們。有屬性調用'from'。我們必須將其分配給它。但是如何？ – Thanoo

謝謝..其工作..我們可以定義我們自己的名字'數據'屬性？ – Thanoo

NP，當然，[使用數據屬性]（https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes） –

如何動態實現ionRangeSliders

回答

相關問題