Question

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

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

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

代码无法在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有class =“p”;

<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">

加载动画无效

0 个答案: