如何查看點擊按鈕上的圖像？

Question

如何通過單擊靠近按鈕來查看圖像文件？這裏輸入類型文件是動態創建的。

查看，

$(document).on("click", "#idImgView", function() { 
 
    var idProjectTitle = document.getElementsByClassName("idProjectTitle"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="projectidAppe" class="form-group"> 
 
    <label>Project Photos</label> 
 
    <div class="form-group file-uploader"> 
 
    <div class="input-group col-xs-12"> 
 
     <span class="input-group-addon"></span> 
 
     <input type="text" id="txtProjectTitle-0" style="height: 35px !important" class="form-control input-lg" disabled="" placeholder="download.jpg"> 
 
     <div id="clearbtn-0" class="input-group-btn"> 
 
     <div class="browse btn btn-primary" style="display: none;"> 
 
      Browse 
 
      <input type="file" accept="image/*" class="idProjectTitle file" name="fileUploadphoto-0"> 
 
     </div> 
 
     <div id="idImgDelete" class="browse btn btn-primary">Delete</div> 
 
     <div id="idImgView" class="browse btn btn-primary">View</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group file-uploader"> 
 
    <div class="input-group col-xs-12"> 
 
     <span class="input-group-addon"></span> 
 
     <input type="text" id="txtProjectTitle-1" style="height: 35px !important" class="form-control input-lg" disabled="" placeholder="Lotus_flower.jpg~c200.jpg"> 
 
     <div id="clearbtn-1" class="input-group-btn"> 
 
     <div class="browse btn btn-primary" style="display: none;"> Browse<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-1"></div> 
 
     <div id="idImgDelete" class="browse btn btn-primary">Delete</div> 
 
     <div id="idImgView" class="browse btn btn-primary">View</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這是可以通過使用document.getElementsByClassName？如何做到這一點？

Answer 1

您可以使用DOM遍歷方法來定位所需的元素。使用.closest()來遍歷共同的父親，然後使用.find()來定位元素。

注意標識符必須是唯一的，以下是摘錄。這裏的代碼片段.get()用於獲取DOM元素的引用。

$(document).on("click", ".idImgView", function() { 
 
    var sourceElement = $(this).closest(".file-uploader").find('.idProjectTitle').get(0); 
 
    var target = $(this).closest(".file-uploader").find('.imagedisplay').get(0); 
 

 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    target.src = e.target.result; 
 
    } 
 
    reader.readAsDataURL(sourceElement.files[0]); 
 
    console.log(sourceElement.files) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="projectidAppe" class="form-group"> 
 
    <div class="form-group file-uploader"> 
 
    <div class="input-group col-xs-12"> 
 
     <div id="clearbtn-0" class="input-group-btn"> 
 
     <div class="browse btn btn-primary"> 
 
      Browse 
 
      <input multiple type="file" accept="image/*" class="idProjectTitle file" name="fileUploadphoto-0"> 
 
     </div> 
 
     <button class="browse btn btn-primary idImgView">View</button> 
 
     <img class="imagedisplay" src="" width="100"/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

由於您使用jQuery的你可以只使用以下的選擇讓所有的元素與idProjectTitle類：

var idProjectTitle = $('.idProjectTitle'); 

注：id應該是同一個文檔中唯一的，這樣試圖取代idImgDelete由共同的類或增加的標識符。

希望這會有所幫助。