javascript - 如何让 slider 在网站上动态添加或减去元素？

Question

<分区>

Answer 1

如果我理解，您想从 slider 中选择要显示的按钮数量，并让单个页面根据要显示的按钮数量自行更新。我不确定您所说的点击/未点击是什么意思。

这是一个表单，用于选择要从范围输入 slider 中显示的按钮数。在提交时，我从 slider 中获取值，并在 javascript 数组中循环它，创建按钮。这通常是您想要的吗？

• 请注意，我在这段代码中确实有一个表单，但删除了它，因为代码编辑器给出了一个错误，指出“允许表单”权限未设置，所以我为提交按钮分配了一个点击处理程序，而不是使用正确的形式。

$('#range').on('change',function(){
  $('#rangeVal').html($(this).val());
});

$('#submit').on('click',function() {
  rangeVal = $('#range').val();
  $buttons = $('#buttons');
  $buttons.html('');
  for (var i = 1; i <= rangeVal; i++) {
    $buttons.append('<svg id="table1" width="250" height="300"> <circle id="seat" cx="170" cy="125" r="20" stroke="black" stroke-width="2" onclick="changeColor()"/>');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="range" min="1" max="100" id="range" value="1"> <span id="rangeVal">1</span> 
<input type="submit" id="submit">

<div id="buttons"></div>