Javascript 以多按钮形式使用jQuery运行加载动画

我有2个“选择文件”按钮和2个“上传”按钮

形式灵活

例如，您通过第一个“选择文件”按钮选择文件，但按第二个“上载”按钮-上载仍然有效

我的目标是在上面的例子中显示一个加载动画。即，即使单击了第二个上载按钮，也会在第一个“选择文件”按钮周围显示加载动画，反之亦然

到目前为止，我已经写了以下内容：

$(document).ready(function() {
    $("#Btn1").click(function(){
        $("#loader1").show();
        $("#spinner1").show();
        $("#Btn1").hide();
        })
    $("#Btn2").click(function(){
        $("#loader2").show();
        $("#spinner2").show();
        $("#Btn2").hide();
        })

});

---

它只是不起作用，即当我使用第一个选择文件上载文件并单击第二个上载按钮时，加载动画围绕第二个上载按钮而不是第一个上载按钮运行。如果我在第二个“选择”字段中上载一个文件并按下第一个上载按钮，情况也是如此。如何改进这一点？

您可以将一个事件处理程序与多个选择器一起使用，使用以and:eq选择器开头的属性

如果两个输入类型=文件元素的file.length都大于0，则在[id^=loader]和[id^=spinner]元素上调用.show、.hide，在[id^=Btn]元素上调用.show；如果索引0或索引1处的输入类型=文件元素的.files.length大于0，则在第一组元素上调用.hide、.show，在第二组元素上调用.hide、.show

var input = $("input[type=file]");

$("[id^=Btn]").click(function() {
  if (input.filter(function(index, el) {
    return el.files.length
  }) === 2) {
    $("[id^=loader], [id^=spinner]").show();
    $("[id^=Btn]").hide();
  } else {
      if (input.eq(0)[0].files.length && !input.eq(1)[0].files.length
         || input.eq(1)[0].files.length && !input.eq(0)[0].files.length) { 
           $("[id^=loader]:eq(0), [id^=spinner]:eq(0)").show();
           $("[id^=Btn]:eq(0)").hide();           
      } else {
        if (input.eq(1)[0].files.length) {
          $("[id^=loader]:eq(1), [id^=spinner]:eq(1)").show();
          $("[id^=Btn]:eq(1)").hide();
        }
      }
  }    
});

---

我认为您应该查看文档上的更改事件并从中进行筛选。这将处理所有的输入，而不依赖于时钟事件，时钟事件有可能（尽管很小）与添加到输入的文件不关联

如果用户在两个元素上都上传了文件，会发生什么情况？然后两个加载动画应该在各自的位置上运行。如果发送了第二个元素更改事件，并且用户单击了第二个按钮，会发生什么情况？只有第二个按钮。显示，.hide应该被调用？是的，所以我试图完成的是，如果用户向第二个输入字段添加一个文件，然后单击两个上载按钮中的任何一个上载按钮，那么加载程序应该只围绕第二个字段运行，反之亦然，对于第一个字段。如果逻辑是您已经描述了您可以创建一个JSFIDLE或plnkr来演示吗？很抱歉，我删除了我之前的评论，因为我忽略了您对我的问题的第二条评论，这基本上说明了我所面临的问题：我想既然我在表单中添加了另一个上载按钮和字段，我也应该更新我的问题，因为上面的答案也会受到影响由于我的更新，你读过之前的评论了吗？为什么你要给这个问题添加要求？问题是，由于3个字段和3个上传按钮的存在，给定的代码不起作用，我在这里可能是错的，但我已经尝试过了，我只在第一个输入字段周围获得动画，即使文件只在第二个输入字段中加载，并且我按下了第一个上传按钮Button你在这方面有什么建议吗；$'p1'.changefunction{$'Btn1'。单击函数{$loader1.show；$spinner1.show；$Btn1.hide；}是否为第二个和第三个按钮以及此代码下面的输入字段添加相同的内容？