Question

我有一个表单，当usr上传文件时，该表单应显示文本区域。

如果用户上载imagen，则需要在image字段中显示textarea字段。但是，实际上，即使javascript位于html内，我的代码也不会这样做。

这是此的CODEPEN：

我有这个JS，但是当用户上传文件时无法识别，我应该对我的代码进行哪些更改？

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

html：

<div class="row padding80-top">

  <div class="col-md-3 mb-4"></div>
  <div class="col-md-6 mb-4">
     <p class="text-size60 bold-font">Sube tu imagen</p>
     <form method="POST" enctype="multipart/form-data" action="">
        <input type="hidden" name="csrfmiddlewaretoken" value="feLAxC4KQTvAL532BafNKadPOsGOq1OTwLCS6GNReJ3z7lXvIhDRUOE0s0dsnkjU">

          <div class="form-group">


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

            <label for="id_image" class="col-form-label ">
                Image
            </label>


          <div class="">
              <input type="file" name="image" accept="image/*" class="clearablefileinput" id="id_image">
           </div>
    </div>
    <div id="instrucciones-adicionales"  style="display:none">

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

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

      <label for="id_comment" class="col-form-label ">
                Comment
      </label>

    <div class="">
       <textarea name="comment" cols="40" rows="10" class="textarea form-control" id="id_comment">
</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>

更新1 ：

问题在于对JQUery的调用位于主体关闭标签之前的底部。

我应该在代码中进行哪些更改，因此将对Jquery的调用保留在底部，当用户上传图像时它会显示textarea字段？

Answer 1

您的笔上没有启用jQuery。您需要通过点击JS窗格顶部的齿轮图标来添加它，并将其添加到那里。

即使在Codepen中，您也可以使用浏览器的开发人员控制台查看代码正在生成哪些错误。在这种情况下，您会看到：

Uncaught ReferenceError: $ is not defined

这告诉您尚未加载jQuery。

JS：在输入更改时显示textarea字段

1 个答案: