jquery - jquery根据输入字段将图像添加到div

Question

我正在尝试根据特定输入字段的值将图像“x”次数添加到 div 中。随着数字的增加或减少，我需要图像出现/消失。认为我在这方面还差得很远，但这就是我所在的地方：

for(i=0; i<cans; i++) {
    $('.cans').append('<img src="can.png" />');
}

其中 '.cans' 显然是 div 容器，而 'cans' 是设置为输入字段值的 var。任何和所有的帮助总是非常感谢！

Answer 1

像这样的东西应该可以工作，特别是如果你的输入是一个选择。如果它实际上是一个文本输入，你还需要做一个keydown事件监听器。

$('input_field_id').change(function(){
    $('.cans').html('');
    var cans = parseInt($(this).val());
    for(i=0; i<cans; i++) {
        $('.cans').append('<img src="can.png" />');
    }
})

Answer 2

$('input').on('change keydown',function(){ //add a change listener
    var count = parseInt($(this).val()); //store the value in a variable as a number
    if (!isNaN(count)){ //check if the value is actually a numer
        $('.cans').html(''); //clear previous images from the element
        for (var i=0; i<count; i++) $('.cans').append('<img src="can.png" />');
    }
})

Answer 3

HTML：

<input type="text"/>
<div class="cans"></div>

jQuery：

  $('input[type=text]').on('change',function(){
      $('.cans').empty();  //Remove all child nodes
      var value = $(this).val();
      for(i=0; i<parseInt(value); i++) {
        $('.cans').append('<img src="can.png" />');
      }
   });

查看JSFiddle。

$('.cans').empty(); //Remove all child nodes 所以不需要递减