Question

感谢this question，我学会了如何根据用户选择的选项动态创建HTML元素。

现在，当用户选择5的选项时，会创建并显示五个输入字段组。

对于每个输入字段组，都有图像的文件上传按钮。

我有一个javascript函数，可以检测用户上传图像的时间，然后显示该图像的缩略图。

问题是我需要访问每个<input type="file" id="appraisal_image1">

的ID

当然，我可以创建多个函数定义，每个函数定义都有不同的ID，然后调用每个函数，但是我想知道是否有没有复制＆amp;粘贴了这么多代码。

I've attached a jsFiddle that correctly displays the first and second image thumbnails but not subsequent ones since there are no functions defined or called for the rest.

Answer 1

使用类而不是使用id并使用事件委托来注册更改处理程序

在下面的示例中，其他类appraisal_image被添加到文件输入控件中，其中类thumbnail_image被添加到图像元素

尝试

// Show Thumbnail
function getThumbnail (input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).closest('.image-ct').find('.thumbnail_image').attr('src', e.target.result).show();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#Number').change(function() {
    var num = parseInt($(this).val(), 10);
    var container = $('<div />');
    for(var i = 1; i <= num; i++) {
        container.append('<div class="image-ct ' + i + '"><div class="row"><div class="col-md-6 col-md-offset-3 bottom-15"><label for="file" class="text-center" id="imageNumber' + i + '">Upload Image:</label><input class="light-gray center appraisal_image" type="file" name="appraisal_image' + i + '" id="appraisal_image' + i + '"><br><div class="image-holder"><img class="hide-till-uploaded center thumbnail_image" id="thumbnail_image' + i + '" src="#" alt="your image" /></div></div></div><div class="row"><div class="col-md-2 col-md-offset-5 bottom-15"><label for="Size" id="Size' + i + '">Size</label><input type="text" class="form-control" name="Size' + i + '" placeholder="Rug Size" id="Size' + i + '"></div></div></div>');
    }

    $('#here').empty().append(container);
});
$('#here').on('change', '.appraisal_image', function(){
    getThumbnail(this);
})

演示：Fiddle

Answer 2

使用类而不是id，然后你可以使用jQuery的on委托：

$(".appraisal_image")  // get all elements with this class
   .on("change", function(){
       getThumbnail1(this);
       $(this).css("display", "block");
   });

on会将事件添加到尚不存在的元素中。这意味着动态添加的元素将自动分配事件

about: jquery on

Answer 3

您可以使用此代码获取表单中存在的所有输入类型ID

[].forEach.call(document.querySelectorAll("input[type='text']"),
           function (input) {
               var value = input.value;
               var id = input.id;
               alert(id);
           });

如何动态定义＆amp;调用jQuery函数

3 个答案: