Question

HTML：

<h1>Favorite Animal:</h1>
<input type='text'>
<button>Answer!</button>
<div id='ans'></div>

Javascript（jQuery）

$(document).ready(function(){
    $('button').click(function(){
        $('#ans').append('<h2>Bunny</h2>')
    })
})

嘿那里。我在想。我可以这样做，以便当我在输入中输入一个数字[type =＆＃39; text＆＃39;]然后将这个数字输入＆＃34; bunny＆＃34;出现？（例如：我键入3，单词＆＃34; bunny＆＃34;出现3次）。

Answer 1

你可以通过一个简单的循环来完成：

＆＃13;

$(document).ready(function() {
  $('button').click(function() {
    for (i = 0; i < $('input[type=text]').val(); i++) {
      $('#ans').append('<h2>Bunny</h2>')
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
<button>Answer!</button>
<div id='ans'></div>

＆＃13;

Answer 2

没问题，只需创建一个包含那么多索引的数组，并填充它

$(document).ready(function() {
  $('button').click(function() {
    var n   = +$('input').val();
    var arr = $.map(Array(n), function() {
      return $('<h2 />', {text : 'Bunny'});
    });

    $('#ans').empty().append(arr);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  Favorite Animal:
</h1>
<input type='text'>
<button>
Answer!
</button>
<div id='ans'>

</div>

Answer 3

是的，您可以获取用户输入的输入，将其从字符串转换为数字，检查它是否为1到1000之间的整数，并在for循环中使用它。每次都在for循环中添加元素。以下是一些示例How can val() return Number?您可以使用滑块执行此操作，使用html属性来确保数字符合您的预期

Answer 4

你可以做得更有效率：

$(document).ready(function(){
    $('button').click(function(){
        $('#ans').append('<h2>Bunny</h2>'.repeat($('input').val()))
    })
})

Answer 5

You may try for This:

 1. In JS part:


    $(document).ready(function() {
          $('button').click(function() {
            for (i = 0; i < $('input[type=text]').val(); i++) {
              $('#ans').append('<h2>Bunny</h2>')
            }
          })
        })

 2. in HTML part:

     <input type='text' />
    <button>Answer!</button>
    <div id='ans'></div>

多次。只需点击一下即可

5 个答案: