javascript - 多个 javascript 上传按钮只将内容放在一个

Question

我正在尝试制作两个上传按钮。一个用于帐户 Logo 。

          .col-sm-6
            .wrapper
              Account Logo
              #account_logo
                = image_tag @account.logo.url, :class => 'account_logo'
                = file_field_tag 'account[logo]', :accept => 'image/png,image/jpeg'
                %a.btn.btn-default{:href => '#'} Choose file
                %span.notice
                  Only PNG or JPG please.

另一个用于电子邮件 Logo 。

          .col-sm-6
            .wrapper
              Email Logo
              #email_logo
                = image_tag @account.email_logo.url, :class => 'email_logo'
                = file_field_tag 'account[email_logo]', :accept => 'image/png,image/jpeg'
                %a.btn.btn-default{:href => '#'} Choose file
                %span.notice
                  Only PNG or JPG please.

我已经添加了 javascript，所以它适用于两者。但是，发生了一些非常错误的事情。我已经添加了尝试和调试警报，他们告诉我即使我点击了#account_logo 按钮，它也会进入#email_logo。一些 javascript 向导可以帮助我吗？

              :javascript
                var logo = ["#account_logo", "#email_logo"];

                for (var i = 0; i < logo.length; i++) {
                  var on_change = (logo[i] + ' input[type=file]');
                  var on_click = (logo[i] + ' a.btn');
                  var logo_img = (logo[i] + ' img');

                  $(document).on('click', on_click , function() {
                    alert("it is now " + on_click);
                    $(on_change).click();
                    alert("it is now " + on_change);
                  });
                  $(document).on('change', on_change, function() {
                    alert("it is now " + on_change);
                    var filelist = $(this).get(0).files;
                    var reader = new FileReader();
                    reader.onload = function (e) {
                      var url = e.target.result;
                      alert("it is now " + logo_img);
                      $(logo_img).attr('src', url);
                    }
                    reader.readAsDataURL(filelist[0]);
                  });
                }

Answer 1

这可能是因为您使用的是 for(var i = ...) {} 循环结构而不是 logo.forEach(function(element) { ... }) 。

这可能发生的原因是因为 JavaScript 没有 block 作用域而是函数作用域，这意味着你的循环变量 i 在整个函数中可用，而你的 .on(' change', ...) 处理程序会将此 i 称为变量，而不是注册处理程序时该变量所具有的任何值。

尝试使用 logo.forEach(function(element) { ... } 构造，而不是设置 var on_change = (logo[i] + 'input[type=file ]');，执行 var on_change = (element + 'input[type=file]');。