动态创建引导滑块与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>