jQuery onchange - 創建div

我有一件小事要做。我有滑塊（輸入範圍）;我需要創建jQuery函數，該函數將根據滑塊的值創建一定數量的div（在這種情況下，跨度從3到25，默認值爲6）。jQuery onchange - 創建div

現在我已經創建了滑塊和div與該div的一些CSS。我只需要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的DIV：

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

感謝您的幫助！

來源

2016-12-17 Vladimir Tomasevic MyNameIsVLT

請提供您已經嘗試什麼的例子。 – atomman

刪除無關標籤，改進段落結構和標題 – Matt

是的，在變化。我創建了一個容器div來清除每一次。如果你不這樣做，它會繼續追加。由於默認情況下顯示一個div，因此也使用克隆。如果你不想默認顯示div，你可以在javascript中創建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/

來源

2016-12-17 17:19:34 james31rock

jQuery onchange - 創建div

回答

相關問題