Question

我正在尝试为文本框中包含的每个滚动条创建一个具有相关值的可拖动滚动条。请帮我解决文本框上的问题，在这种情况下只有一个文本框用于所有滚动条。

HTML：

<div id="sliders">

使用Javascript：

for (var i=1; i <= 12; i++) {
var html = '<div>Number '+i
        +'<input type="textbox" disabled="" id="val">'+'</div>'
          +'<div class="slider" id="slider-'+i+'"></div>';

$('#sliders').append(html);
$('#slider-'+i).slider({
    value:50,
    min: 5,
    max:100,
    step: 0,
    orientation: "horizontal",
    range: "min",
    animate: true,
    slide: function( event, ui ) {
        $('#val').val("" + ui.value + "%");
                                 }
});

} 的console.log（的document.getElementById（ '滑块'）的innerHTML）;

http://jsfiddle.net/damri/a46GC/

Answer 1

这是你想要的吗？您在输入文本中有重复的id属性

http://jsfiddle.net/a46GC/2/

var i = 1;
for (; i <= 12; i++) {
var html = '<div>Number '+i
        +'<input type="textbox" disabled="" id="val-' + i + '">'+'</div>'
          +'<div class="slider" data-id = "'+i+'" id="slider-'+i+'"></div>';

$('#sliders').append(html);
$('#slider-'+i).slider({
    value:50,
    min: 5,
    max:100,
    step: 0,
    orientation: "horizontal",
    range: "min",
    animate: true,
    slide: function( event, ui ) {
        var id = $(this).data('id');
        $('#val-' + id).val(ui.value + "%");
                                 }
});

}

如何创建具有相关值的多个可拖动滚动条？

1 个答案: