動態創建引導滑塊與jQuery或JavaScript

Question

我試着這個沒有成功。作爲參考，引導滑塊在這裏：http://seiyria.github.io/bootstrap-slider/。

我不是JavaScript專家，所以這可能很簡單。 bootstrap-slider網站有很多關於如何配置滑塊的例子。我將生成許多滑塊，具體取決於從JSON文件或其他數據存儲方法中提取多少個對象。它可能是2或它可能是20.

我創建了一個名爲createSlider的javascript函數，我試圖通過bootstrap-slider網站上所需的全部信息。我的Chrome調試區域沒有出現任何錯誤，但沒有發生任何事情。所有適當的客戶端源都在加載。

function createSlider (orgId) { 
slidersList = document.getElementById('slidersList'); 
element = slidersList.createElement("div"); 
var sliderElement = element.createElement('input'); 

var sliderUnique= orgId.concat("Slider"); 
var sliderUniqueVal = orgId.concat("SliderVal"); 
sliderElement.setAttribute('id', charityId); 
sliderElement.setAttribute('data-slider-id', sliderUnique); 
sliderElement.setAttribute('type', 'text'); 
sliderElement.setAttribute('data-slider-min', '0'); 
sliderElement.setAttribute('data-slider-max', '100'); 
sliderElement.setAttribute('data-slider-step', '1'); 
sliderElement.setAttribute('data-slider-value', '50'); 

var span = element.createElement('span'); 
span.setAttribute('style', 'padding-left:5px;'); 
span.innerHTML =' '; 

var innerSpan = span.createElement('span'); 
innerSpan.setAttribute('id', sliderUniqueVal); 
innerSpan.innerHTML = '50'; 

sliderElement.slider({tooltip: 'hide'}); 
sliderElement.on("slide", function(slideEvt) { 
    innerSpan.innerHTML = text(slideEvt.value); 
}); 

} 

的slider()功能是從外部網站，並運行良好，如果我明確地這樣稱呼它的實例狀態。任何人都知道發生了什麼問題？有一個更好的方法嗎？任何想法，將不勝感激。

Answer 1

請注意，在普通JavaScript中，您只能使用document.createElement，然後追加到另一個HTML元素。您不能直接對其他HTML元素調用createElement。

我改變了一些你從普通的舊的JavaScript寫入JQuery的東西，而現在似乎工作：

附：不知道charityId來自哪裏，所以只是將它作爲另一個參數添加到函數中。

$(function() { 
 
    createSlider('o1','c1'); 
 
    createSlider('o2','c2'); 
 
    createSlider('o3','c3'); 
 
}); 
 

 
function createSlider (orgId, charityId) { 
 
    var slidersList = $('#slidersList'); 
 
    var element = $("<div></div>").appendTo(slidersList); 
 
    var sliderElement = $("<input/>").appendTo(element); 
 

 
    var sliderUnique= orgId.concat("Slider"); 
 
    var sliderUniqueVal = orgId.concat("SliderVal"); 
 
    sliderElement.attr('id', charityId); 
 
    sliderElement.attr('data-slider-id', sliderUnique); 
 
    sliderElement.attr('type', 'text'); 
 
    sliderElement.attr('data-slider-min', '0'); 
 
    sliderElement.attr('data-slider-max', '100'); 
 
    sliderElement.attr('data-slider-step', '1'); 
 
    sliderElement.attr('data-slider-value', '50'); 
 

 
    var span = $('<span></span>').appendTo(element); 
 
    span.attr('style', 'padding-left:5px;'); 
 
    span.html(' '); 
 

 
    var innerSpan = $('<span></span>').appendTo(span); 
 
    innerSpan.attr('id', sliderUniqueVal); 
 
    innerSpan.html('50'); 
 

 
    sliderElement.slider({tooltip: 'hide'}); 
 
    
 
    sliderElement.on("slide", function(slideEvt) { 
 
      innerSpan.text(slideEvt.value); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css"> 
 
<script type='text/javascript' src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script> 
 
<div id="slidersList"></div>