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，现在似乎有效：

P.S。我不知道charityId来自哪里，所以只需将它作为另一个参数添加到函数中。

＆＃13;

$(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);
    });
}

＆＃13;

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

＆＃13;

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

1 个答案: