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

Question

我在每个按钮下都有2个choose file按钮和2个upload按钮。

表格很灵活。

例如，你可以选择通过第一choose file按钮文件，但按第二upload按钮 - 上传仍然有效。

我的目标是现在在上面的情况下显示一个加载动画。即在第一个choose file按钮周围显示加载动画，即使点击了第二个upload button，反之亦然。

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

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

}); 

它只是没有当我使用的第一选择文件，并在第二上传按钮点击加载动画运行上传文件，即工作围绕第二个上传按钮而不是第一个。如果我在第二个选择字段中上传文件并按第一个上传按钮，则情况相同。我该如何改进？

Answer 1

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

如果两个input type="file"元件具有比0更大file.length，呼叫.show()，.hide()在两个[id^=loader]和[id^=spinner]元件和.show()在两个[id^Btn]元件;否则，如果在指数0或索引1input type="file"元素有.files.length比0呼叫.hide()，.show()在第一组的元素，否则更大的只在第2组元素

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(); 
     } 
     } 
    }  
}); 

Answer 2

我想你应该看的调用.hide()，.show()文档上的change事件并从中过滤。这将处理所有的输入，并且不依赖于有可能的时钟事件，虽然很小，但不会与添加到输入的文件关联。