Question

我有一件小事要做。我有滑块（输入 - 范围）;我需要创建jQuery函数，它将根据滑块的值创建一定数量的div（在这种情况下，跨度从3到25，默认值为6）。

现在我已经创建了滑块和div以及该div的一些css。我只需要创建div的jQuery函数（我假设 onchange ）。

适用于滑块和div的HTML：

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

div的CSS：

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

感谢您的帮助！

Answer 1

是的，在改变时。我创建了一个容器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/

jQuery onchange - 创建div

1 个答案: