Jquery，根据按钮显示div的数量

Question

我好久没编程了，现在才重新开始……

我希望能够根据按下的按钮显示一些输入。

我有几个从 1 到 6 的按钮

如果我按下任何给定的数字，应该会出现 div 的数量。

例如，如果我按下一个数字为 5 的按钮，那么应该会出现 5 个输入...

我创建了一个小提琴，希望能理解我想要做什么。

https://jsfiddle.net/breeyj4d/1/

另外，如果这个人按了不同的数字，输入中的信息会被删除吗？ （即，如果有人按2，然后将信息放在那里，然后决定按3，然后再回到2，它会被删除吗？）

谢谢！

  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">1</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">2</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">3</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">4</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">5</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">6</span>
  </button>     

  <input type="text"/>

Answer 1

1. 将点击处理程序附加到 .btn 元素
2. 进入点击处理程序时默认隐藏所有输入元素
3. 从 .btn 元素的 span 中获取数字
4. 使用 :lt() 选择器来显示() 输入

---

$('.btn').click(function(){
    $('input').hide();
    var num = parseInt($(this).find('span').text());
    $('input:lt('+num+')').show();
});

DEMO

更新

有了这个，我必须对所有 6 个输入进行 HTML 编码吗？无论如何要在不输入 HTML 中的所有输入的情况下做到这一点？

每次点击都可以append() 和remove()。

如果您想通过单击按钮保留输入值，可以将它们保存在单独的对象中。

var preservedVals = {};
$('.btn').click(function () {
    $('input').remove();
    var num = parseInt($(this).find('span').text());
    for (var i = 0; i < num; i++) {
        var input = $('<input/>');
        if (typeof preservedVals[i] != 'undefined') {
            input.val(preservedVals[i]);
        }
        $('#InputContainer').prepend(input);
    }
});

$(document).on('input', 'input', function () {
    var index = $(this).index('input');
    preservedVals[index] = $(this).val();
});

DEMO

Answer 2

如果您可以将值作为按钮的属性。像这样的：

这是一个分叉或你的演示工作； https://jsfiddle.net/718rkfw5/

<button name="subject" class="btn btn-default" value="1">
   <span class="" aria-hidden="true">1</span>
</button>

<input id="output" type="text"/>

然后像这样检索它：

<script type="text/javascript">
$(document).ready(function() {
   $('.btn').click(function() {
      //alert($(this).val());
      $("#output").val($(this).val());
   });
});
</script>

Answer 3

Here's a JsFiddle with things cleaned up a bit

代码暗示你有

1. 为您的按钮添加了一个类
2. 为您的输入添加了一个 DIV 容器

HTML

<button class="btn btn-default btn-create-input"><span>1</span></button>
<button class="btn btn-default btn-create-input"><span>2</span></button>
<button class="btn btn-default btn-create-input"><span>3</span></button>

<div id="inputs-wrap"></div>

JS / jQuery

var $inputsWrap = $('#inputs-wrap');

$('.btn-create-input').on('click', function(event) {
  event.preventDefault();

  // Get inner HTMl val to determine input amounts
  // NOTE: Another/possibly better way to do this would be to use data attr
  var inputCount = $(this).text();

  // Remove any existing children in input container
  $inputsWrap.children().remove()

  // Loop and create desired amount of inputs, append them to wrap 
  for ( var i=0; i<inputCount; i++ ) {
    $inputsWrap.append('<input type="text" class="form-control"/>');
  }

})