javascript - JQuery:如果输入文件为空，则需要隐藏 div

Question

如果输入文件为空，我需要隐藏一个 div 以显示附加评论。

我不介意它是用 Jquery 还是纯 Javascript 完成的。

我使用过 JQuery，我知道它已被正确调用，因为我的警报会弹出，但我的函数不会隐藏 ID 为#instrucciones-adicionales 的 div 及其所有内容。

HTML:

            <script>
                alert( "Animation complete." );
                $(function () {
                    $("input:file").change(function () {
                        var fileName = $(this).val();
                        if (filename != "") {
                            $("#instrucciones-adicionales").hide();
                        } //show the button
                    });
                });
            </script>


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


 </br>
 </br>

 <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


  <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>

Answer 1

1. 你打错了(变量区分大小写 - fileName !== filename)。
2. 我添加了 show 部分:

alert( "Animation complete." );
$(function () {
    $("input:file").change(function () {
        var fileName = $(this).val();
        if (fileName != "") {
            $("#instrucciones-adicionales").hide();
        } else {
            $("#instrucciones-adicionales").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales" style="display: none">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


                        </br>
                        </br>

                        <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


                        <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>


                    </form>

</main>