Question

我作为一个庸人来到这里，所以忍受我...我最近开始学习编码后想出一个网站的想法，并决定尝试自己做。

所以在网站上我创建了一个页面，用于显示一组按钮，代表可用性，因此有两种状态：点击或取消点击。每个用户登录后，都必须从1-100的滑块菜单中选择自己的按钮数量。

为了做到这一点，我想我将不得不设计一个单独的.html文件，包括1个按钮，2个按钮，3个按钮等等......并且每个文件都与所选的相应数量相匹配。

由于我计划拥有多达100个按钮，我可以想象这不仅需要很长时间，而且可能会使我的网站减速很多。

有没有办法只有一个.html文件，并让它相对于用户通过Javascript或PHP选择的数字动态更新自己？

Answer 1

如果我理解，您想要从滑块中选择要显示的按钮数，并且相对于要显示的按钮数量，单个页面会自行更新。我不确定点击/未点击是什么意思。

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

请注意，我在此代码中确实有一个表单，但删除了它，因为代码编辑器发出错误说“＆allow-forms＆＃39;权限未设置，因此我为提交按钮分配了一个点击处理程序，而不是使用正确的表单。

＆＃13;

$('#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()"/>');
  }
})

＆＃13;

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

＆＃13;

如何在网站上动态添加或减少元素？

1 个答案: