带有jquery的多个滑块范围

Question

我想创建一个动态滑块范围，这样每次用户点击按钮时都会出现新的滑块。我用clone（）完成了它，但似乎它复制了具有相同id的上一个滑块。我的问题是如何在每次点击时使用不同的ID添加滑块，以便它具有不同的读数？

HTML

<button id="slide">Range</button>
<div id="slide-content"></div>
    <div id="for-slide">
        <h3 class="first-header">Points</h3>             
            <form>
                <div class="slider-rating">
                <span>0</span><input id="points" type="range" min="0" max="10"  value="0">           <span>10</span>
                 <article id="currentValue" style="margin-left:10%;"></article>

               </div>               
            </form>
     </div>

jquery的

$(document).ready(function(){
var currentValue = $('#currentValue');
        $('#points').change(function(){
            currentValue.html(this.value);
        });         
        $('#points').change();

        $('#slide').click(function(){

            $('#for-slide').clone().appendTo('#slide-content');

        });
});


the above codes show the reading only for the first slider but not for others.
can anyone help please?

Answer 1

只需为您的克隆添加不同的ID，如下所示：

$('#for-slide').clone().attr('id','some_unique_id').appendTo('#slide-content');

修改

我仍然不太确定你想要什么，但我现在假设你只想在表单元素内部生成一个带有计数器的滑块。

HTML结构：

<button id="slide">Range</button>
<div id="slide-content"></div>
<div id="for-slide">
    <h3 class="first-header">Points</h3> 
    <form id="form">
        <div class="slider-rating"> 
            <span>0</span>
            <input class="points" type="range" min="0" max="10" value="0" />  
            <span>10</span>
            <article class="currentValue" style="margin-left:10%;">0</article>
        </div>
    </form>
</div>

使用Javascript：

$(document).ready(function () {
    var sliderPrototype = $(
        '<div class="slider-rating">'+
            '<span>0</span><input class="points" type="range" min="0" max="10" value="0" /><span>10</span>'+
            '<article class="currentValue" style="margin-left:10%;">0</article>'+
         '</div>');
    $('.points').change(sliderChangeHandler);

    $('#slide').click(function () {
        var newSlider = $(sliderPrototype).clone();
        newSlider.find('.points').change(sliderChangeHandler);
        newSlider.appendTo('#form');
    });
});

function sliderChangeHandler() {
    $(this).parent().find('.currentValue').html($(this).val());
}

我已经创建了一个滑块div原型，您可以根据需要多次克隆，然后在添加它时将点击处理函数添加到输入范围。

JSFiddle：http://jsfiddle.net/nU7XU/5/