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

Question

每个按钮下方都有 2 个选择文件 按钮和 2 个上传 按钮。

形式灵活。

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

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

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

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

});

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

Answer 1

您可以使用带有多个选择器的单个事件处理程序，利用以 and :eq() 开头的属性。选择器。

如果两者input type="file"元素有file.length大于0 ，调用.show() , .hide()两者[id^=loader]和[id^=spinner]元素和.show()两者[id^Btn]元素；否则如果 input type="file"索引 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();
        }
      }
  }    
});