入力タイプファイルフィールドに関連付けられたラベルのIDを取得します。

Question

入力タイプファイルフィールドに関連付けられたラベルのIDを取得する必要があります。 idのphoto1、photo2、photo3、photo4の4つの入力タイプのファイルフィールドがあります。これらのファイルフィールドに関連付けられたラベルは、それぞれラベル1、ラベル2、ラベル3、ラベル4です。私の要件は、それぞれのラベルフィールドを取得し、ラベルのテキストを更新することです。これはこれまで私が試したことです。

<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 id="preview-1" class="preview"></div> 
          <button type="button" class="koh-photo-remove remove-button"> 
           <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 </h3> 

           <div class="modal-inner"> 
           <span>Browse for a photo</span> <label id="label-1" 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" required/> 
           <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 id="input-button-modal-1" class="input-button-modal">UPLOAD</label> 
           </div> 

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

私は4つのdivクラスを持っています。これはJavaScriptです。

$contactPhotos.each(function() { 
      var $photoInput = $(this).find("input[type=file]"); 
      var img = $("<img />"); 
      var photoPreview = $photoInput.parent().parent().parent().parent().find(".preview").attr("id"); 
      var photoPreviewImg = $("#" + photoPreview); 
      function readURL(input) { 
       if (input.files && input.files[0]) { 
        photoPreviewImg.html(""); 
        //alert(JSON.stringify(photoPreviewImg, null, 4)); 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         img.attr("style", "height:41px;"); 
         img.attr("style", "width:210px;"); 
         img.attr("src", e.target.result); 
        } 
        reader.readAsDataURL(input.files[0]); 

       } 
      } 
      $(this).on('click','.input-button-modal', function(e) {   
        var contactModal = $(this).parent().parent().parent().parent().parent().find(".modal").attr('id'); 
        var currentModal = $('#' + contactModal); 
        currentModal.attr("style", "display:none"); 
        photoPreviewImg.append(img); 
      }); 

      $photoInput.parsley().on('field:success', function() { 
        var inputID = $photoInput.attr('id'); 
        var inputTarget = '#' + inputID; 
        var inputValue = document.getElementById(inputID); 
        //inputLabel.attr("style", 'width:70%;'); 
        readURL(inputValue); 
        $(inputTarget).parent().parent().parent().parent().find('.koh-photo-remove').show(); 
        $contactForm.find('#terms').prop('required',true); 
       }); 
      }); 

助けてください。私はそれぞれの入力タイプのファイルフィールドに関連付けられたラベルのIDを取得したい。前もって感謝します。

Answer 1

ラベルと入力フィールドは、入力のidというラベルのforでリンクされています。あなたは単にそのリンクを利用することができます

function getLabelID(input){ 
    return $("label['for=" + $(input).attr("id") + "']").attr("id"); 
}