javascript - 选择父 ID 始终返回未定义

Question

我正在开发一个应用程序，需要在模式中上传图像，并在模式关闭时在预览 div 中显示图像。我无法访问父级的 ID，因为它总是返回未定义。我无法弄清楚为什么会发生这种情况。这是我到目前为止所尝试过的。我正在发布必要的 JS 和 HTML。我总共有 4 个模态，每个模态都有不同的 ID，并且所有 4 个模态的功能都相同。

var $contactPhotos = $contactForm.find(".koh-contact-photo");
$contactPhotos.each(function() {
      var $photoInput = $(this).find("input[type=file]");

      function readURL(input) {
        if (input.files && input.files[0]) {
          var photoPreview = $photoInput.parent().find(".preview");
          photoPreview.html("");
          var reader = new FileReader();
          reader.onload = function(e) {
            var img = $("<img />");
            img.attr("style", "height:41px;");
            img.attr("src", e.target.result);
            photoPreview.append(img);
          }
          reader.readAsDataURL(input.files[0]);
        }
      }

<div class="koh-contact-photo">
  <span><fmt:message key='photo1' /></span> <label id="upload-1" class="button-default"><fmt:message
										key='photo.upload' /></label>
  <div class="preview"></div>
  <button type="button" class="koh-photo-remove" style="background:#FFF;border:1px solid #77777A;">
									<span class="icon" data-icon="&#xe605"></span> <span
										class="label"><fmt:message key='photo.remove.text' /></span>
								</button>

  <!-- The Modal -->
  <div id="myModal1" class="modal">
    <!-- Modal content -->

    <div class="modal-content">
      <span class="close">&times;</span>
      <h3 class="modal-title"> Upload Photo 1 </h3>

      <div class="modal-inner">
        <span>Browse for a photo</span> <label style="margin-bottom:20px;" class="button-default browse" for="photo1">BROWSE</label><input id="photo1" type="file" name="photo1" data-parsley-filesize="3" data-parsley-filetype="image/jpeg, image/png, image/gif, image/bmp"
          data-parsley-trigger="change" />

        <hr class="modal-hr" />
        <div class="guidelines-modal">
          <p> GENERAL GUIDELINES </p>
          <p> Supported files are: .jpg, .gif, .png, .bmp </p>
          <p> Maximum File Size: 3MB</p>
          <p style="margin-bottom:10px;"> For best results: upload at 400 x 300</p>
          <p> Note: images are automatically resized</p>
        </div>
        <div class="koh-contact-captcha modal-hr">
          <!--div class="g-recaptcha" data-sitekey=<fmt:message key='kohlerSterling.google.captcha.key' />></div-->
          <!--div class="g-recaptcha" id="recaptcha1"></div-->
          <div id="recaptcha3" class="captcha"></div>
          <div class="error-message">
            <span><fmt:message key='required.field.text' /></span>
          </div>

        </div>
        <div class="terms-modal">
          <div class="checkbox">
            <input type="checkbox" id="terms-condns" />
            <label style="font-family:Helvetica Neue LT Pro Roman !important;font-size:12px !important;color:#000 !important;font-weight:400 !important;" for="terms-condns">I agree to the <a class="modal-anchor" href="#">Terms and Conditions</a></label>
          </div>
        </div>
        <hr class="modal-hr" />
        <div class="modal-buttons">
          <label class="button-default-modal" style="margin-right:20px;">CANCEL</label>
          <label class="input-button-modal">UPLOAD</label>
        </div>

      </div>
    </div>
    <input type="hidden" id="captchaKey" value="<fmt:message key='google.recaptcha.site.key'/>">
  </div>
</div>

当我点击上传按钮时，我想选择类为“preview”的div。如有任何帮助，我们将不胜感激。

Answer 1

.find() 将获取所选元素的后代元素。无需深入研究代码，我认为这可以是您可以改进的部分var photoPreview = $photoInput.parent().find(".preview"); 行。

如果 $photoInput 有一个类名为“preview”的父 div，您可以使用以下命令选择它$photoInput.parent(".preview");