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

将点击处理程序附加到.btn元素
默认情况下，在您输入点击处理程序
从.btn元素中的范围中获取数字
使用：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

代码暗示你有

在按钮中添加了一个课程
为您的输入添加了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"/>');
  }

})

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

3 个答案: