jQuery onchange - 作成div

Question

私はやるべきことは少しあります。私はスライダ（入力範囲）を持っています。私はスライダーの値に基づいて特定の数のdivを作成するjQuery関数を作成する必要があります（この場合、デフォルト値6の3から25までです）。

今のところ、私はスライダを作成し、そのdivのcssでdivを作成しました。私はdivを作成するjQuery関数（私はonchangeと仮定します）が必要です。スライダとdivのための

HTML：divのための

<div id="square">BLINK</div> 

<div id="slajder"> 
    <form name="forma"> 
    <input type="range" name="numberEl" id="input" value="6" min="3" max="25" oninput="exiting.value = input.value"> 
    <output name="numberEl" id="exiting">6</output> 
    </form> 
</div> 

CSS：すべてのあなたの助けを

#square { 
    height: 40px; 
    width: 100%; 
    line-height: 40px; 
    position: relative; 
    background-color: skyblue; 
    text-align: center; 
} 

ありがとう！

Answer 1

はい、変更になります。私はコンテナdivを作成して毎回消去しました。もしあなたがそうしなければ、それは追加し続けるでしょう。また、デフォルトで表示される1つのdivがあるため、クローンを使用します。デフォルトでdivを表示したくない場合は、javascriptのみでdivを作成するか、divを非表示にすることができます。

$(document).on('change', '#input', function (e) { 
var element = $('.square'); 
$('#Container').html(''); 
for (i = 0; i < $(this).val(); i++) { 
element.clone().appendTo("#Container"); 
} 


}) 

更新、改良版：

http://jsfiddle.net/b4r25z83/4/

少しクリーナー：

$(document).on('change', '#input', function (e) { 
    $('#Container').html(''); 
    for (i = 0; i < $(this).val(); i++) { 
      $('.square').first().clone().html((i + 1) + ' BLINK').show().appendTo("#Container"); 
    } 
}) 

http://jsfiddle.net/b4r25z83/7/