Javascript 加载动画不起作用

因此，当在输入字段中选择一个文件，然后单击一个上载按钮时，我使用下面的jQuery代码片段来运行加载动画（在CSS中创建）

表单有3个输入字段，带有3个上传按钮，非常灵活。例如，如果用户在第一个输入字段中选择了一个文件，但单击了第二个上载按钮，则加载动画应仅围绕第一个输入字段运行。另一个示例是，如果用户在第一个输入字段和第二个输入字段中选择文件，但单击第三个上载按钮，则加载动画应仅在第一个和第二个输入字段中运行

代码无法在IF语句函数中运行。如果我更改代码（如下所述），它将使动画运行，但它最终使加载动画在所有3个选择字段中运行，即使只选择了一个文件。这不是必需的，但确实告诉我，包含IF语句的代码部分在上述代码中出现故障

$(document).ready(function() {
    $(document).on("click", ".UploadBtn", function() {
        $(".p").each(function(file) {
            if  ($(this).val()) {
                $(".loader").show();
                $(".spinner").show();
                $(".UploadBtn").hide();
            }

         })
   });
});

我是一个初级程序员，我花了几个小时试图解决这个问题，但没有任何效果。非常感谢你的帮助

根据建议添加HTML代码段 （它还有一些由我的朋友编写的Python代码）form.photo1、2和3 have class=“p”

{{form.photo1}}
加载
{{form.photo2}}
加载
{{form.photo3}}
加载

你的

html

代码在这里会很有帮助。@GuruprasadRao我已经添加了html代码问题的html中没有元素有

.className

“p”

{form.photo1}、{{form.photo2}和{form.photo3}有.className“p”。我也更新了这篇文章。

.p

元素

元素是否与名称

表单.photoX

所暗示的相同？为什么要测试

元素的

.val（）

？顺便提一下，为什么当他们都提交所有三个文件而不仅仅是他们自己的相邻文件时，你有三个单独的上传按钮？

$(document).ready(function() {
    $(document).on("click", ".UploadBtn", function() {
        $(".p").each(function(file) {
            if  ($(this).val()) {
                $(".loader").show();
                $(".spinner").show();
                $(".UploadBtn").hide();
            }

         })
   });
});

<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
 loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">