javascript - 使用 jquery 或 javascript 动态创建 Bootstrap slider

Question

我正在尝试这个但没有成功。作为引用， Bootstrap slider 在这里:http://seiyria.github.io/bootstrap-slider/ .

我也不是 JavaScript 专家，所以这可能非常简单。 bootstrap-slider 站点有许多示例，说明如何按照您希望的方式配置 slider 。根据从 JSON 文件或其他数据存储方法中提取的对象数量，我将生成许多 slider 。可以是 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>