使用jquery或javascript动态创建引导滑块 [英] Dynamically Creating bootstrap-sliders with jquery or javascript

问题描述

我正在尝试此操作，但没有成功.作为参考，引导程序滑块位于此处: http://seiyria.github.io/bootstrap-slider/.

I'm trying this with no success. For reference, the bootstrap slider is here : http://seiyria.github.io/bootstrap-slider/.

我也不是javascript专家，所以这可能很简单. bootstrap-slider站点上有许多示例，说明如何以所需方式配置滑块.我将根据从JSON文件或其他某种数据存储方法中拉出多少个对象来生成许多滑块.可以是2或20.

I'm not a javascript expert, either, so this might be very simple. The bootstrap-slider site has many examples of how to configure the sliders the way you want them. I'm going to have many sliders generated depending on how many objects are pulled from a JSON file or some other data storing method. It could be 2 or it could be 20.

我创建了一个名为createSlider的javascript函数，该函数试图传递bootstrap-slider站点上所需的所有信息.我的Chrome调试区域没有出现任何错误，但没有任何反应.所有适当的客户端源都在加载中.

I created a javascript function called createSlider that I've attempted to pass all of the information required at the bootstrap-slider site. I'm not getting any errors in my Chrome debugging area, but nothing is happening. All of the appropriate client-side sources are loading.

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()函数来自外部站点，如果我像示例状态那样显式调用它，则可以正常运行.有人知道出什么事了吗?有一个更好的方法吗?任何想法将不胜感激.

The slider() function is from the external site, and runs fine if I explicitly call it like the examples state to. Anyone know what's going wrong? Is there a better way to do this? Any ideas would be appreciated.

推荐答案

注意，在纯JavaScript中，您只能使用document.createElement，然后附加到另一个HTML元素.您不能直接针对另一个HTML元素调用createElement.

Note, in plain JavaScript, you can only use document.createElement and then append to another HTML element. You cannot call createElement directly against another HTML element.

我将您编写的一些内容从普通的旧JavaScript更改为JQuery，现在似乎可以使用了:

I changed some of what you wrote from plain old JavaScript into JQuery, and now seems to work:

P.S.不知道charityId的来源，所以只是将其作为另一个参数添加到函数中.

P.S. Didn't know where charityId came from, so just added it as another parameter into the function.

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

这篇关于使用jquery或javascript动态创建引导滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！