Question

我的页面上有6张图片上传文件，以及在选择新图片时更新图片预览的脚本。我不希望每个脚本只有一个更改了id的6个脚本，所以我想知道如何以javascript noob完成此操作。

每张图片上传的ID都为logo-id-#。

Bootstrap图片上传：

<div class="col-md-2">
     <div class="form-group">
          <div class="main-img-preview center">
               <img class="thumbnail img-preview" src="http://farm4.static.flickr.com/3316/3546531954_eef60a3d37.jpg" title="Preview Logo">
          </div>
          <div class="input-group">
               <input id="fakeUploadLogo" class="form-control fake-shadow" placeholder="Choose File" disabled="disabled">
                      <div class="input-group-btn">
                           <div class="fileUpload btn btn-primary fake-shadow"><span><i class="glyphicon glyphicon-upload"></i> Browse</span>
                                <input id="logo-id-1" name="logo" type="file" class="attachment_upload">
                           </div>
                      </div>
           </div>
    </div>

使用Javascript：

<script>
$(document).ready(function() {
    var brand = document.getElementById('logo-id-1');
    brand.className = 'attachment_upload';
    brand.onchange = function() {
        document.getElementById('fakeUploadLogo').value = this.value.substring(12);
    };

    // Source: http://stackoverflow.com/a/4459419/6396981
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.img-preview').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#logo-id-1").change(function() {
        readURL(this);
    });
});

Answer 1

将整个事物包裹在循环中，每次迭代都以不同的（并递增ID）为目标。

$(document).ready(function() { //note - can be shortened to $(function() {
    for (var i=1; i<=6; i++) {
        //...your code. From now on, refer not to 'logo-id-1' but to 'logo-id-'+i
    }
});

如何循环使用类似的元素id来更改/更新信息？

1 个答案: