JQueryでループを使用して動的に変更機能を定義する方法は？

Question

私はこのようにロードされたHTMLを持っている： -

if(isset($company_admin)) 
{ 
    $tot_admin = count($company_admin); 
    for($i = 0; $i < $tot_admin; $i++) 
    {?> 
     <div class="form-group col-sm-12"> 
     <label class="col-sm-2">Admin Image <?php if($i > 0) echo ($i+1);?></label> 
     <div class="col-sm-9"> 
      <input type="hidden" name="hid_admin_img[]" id="hid_admin_img<?php if($i > 0) echo '_'.($i+1);?>" value="<?php if(isset($company_admin[$i]['admin_img'])) { echo $company_admin[$i]['admin_img'];} ?>"> 
      <input type="file" name="admin_img[]" id="admin_img<?php if($i > 0) echo '_'.($i+1);?>" class="form-control"></br> 
     <div id="imagePreview3<?php if($i > 0) echo '_'.($i+1);?>"></div> 
     <div id="existImage3<?php if($i > 0) echo '_'.($i+1);?>"> 
     <?php if(isset($company_admin[$i]['admin_img'])) {?> 
      <?php if($company_admin[$i]['admin_img'] != ''){?><img src="<?php echo base_url();?>uploads/admin_org/<?php echo $company_admin[$i]['admin_img'];?>" height="100" width="100"><?php } else {?><img src="<?php echo base_url();?>uploads/new-user-image-default.png" height="100" width="100"><?php } }?> 
     </div> 
     </div> 
    </div> 
    <?php 
    } 
}?> 

画像が選択される場合は、imagePreview divのプレビューを表示するためにそれをリロードします。

ここに私がしていたことの基本的なサンプルがあります。

$("#admin_img_2").on("change", function() 
{ 
    var files = !!this.files ? this.files : []; 
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support 
    if (/^image/.test(files[0].type)){ // only image file 
     var reader = new FileReader(); // instance of the FileReader 
     reader.readAsDataURL(files[0]); // read the local file 
     reader.onloadend = function(){ // set image data as background of div 
      alert("hii"); 
      $("#existImage3_2").hide(); 
      $("#imagePreview3_2").show(); 
      $("#imagePreview3_2").css("background-image","url("+this.result+")"); 
     } 
    } 
}); 

ここで、カウンタに基づいてそれぞれ$（ "＃admin_img"）の関数を1つ書く必要があります。

私はカウンターを使用して、いくつかのような動的なアプローチを使用して同じことを実現したい：

$(function(){ 
    for(var i = 2; i<=4; i++) 
    { 
     $("#admin_img_"+i).on("change", function() 
     { 
      var files = !!this.files ? this.files : []; 
      if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support 

      if (/^image/.test(files[0].type)){ // only image file 
       var reader = new FileReader(); // instance of the FileReader 
       reader.readAsDataURL(files[0]); // read the local file 

       reader.onloadend = function(){ // set image data as background of div 
       $(this).closest("div[id^=existImage3_]").hide(); 
       $(this).closest("div[id^=imagePreview3_]").show(); 
       $(this).closest("div[id^=imagePreview3_]").css("background-image","url("+this.result+")"); 
        } 
       } 
     }); 
    } 
}); 

しかし、どういうわけか、その動作していないが。私は間違って何をしていますか？

Answer 1

共通のクラスを使用してHTMLを作成し、イベントハンドラをバインドすることができます。イベントハンドラでは、要素間のリレーションシップを使用し、さまざまなDOMトラバーサルメソッドを使用して目的の要素をターゲットにします。ここでは例として.siblings()が使用されています。あなた当たりの電流HTMLとして

HTML

<input type="file" name="admin_img[]" class="admin_img form-control"> 
<div class="imagePreview"></div> 
<div class="existImage"></div> 

スクリプト

$(".admin_img").on("change", function() { 
    var files = !!this.files ? this.files : []; 
    // no file selected, or no FileReader support 
    if (!files.length || !window.FileReader) { 
     return; 
    } 
    // only image file 
    if (/^image/.test(files[0].type)) { 

     // Cache the current element context in a variable 
     var _this = $(this); 

     // instance of the FileReader 
     var reader = new FileReader(); 

     // read the local file 
     reader.readAsDataURL(files[0]); 

     // set image data as background of div 
     reader.onloadend = function() { 
      _this.siblings("existImage").hide(); 
      _this.siblings("imagePreview").show().css("background-image", "url(" + this.result + ")"); 
     } 
    } 
}); 

---

。あなたのDOMトラバーサルメソッドが正しくありません。 In onloadendイベントthisはinput要素を参照していないため、動作しません。

スクリプト

//Bind event based on name attribute 
$('[name="admin_img[]"]').on("change", function() { 
    var files = !!this.files ? this.files : []; 
    // no file selected, or no FileReader support 
    if (!files.length || !window.FileReader) { 
     return; 
    } 
    // only image file 
    if (/^image/.test(files[0].type)) { 

     var _this = $(this); 

     // instance of the FileReader 
     var reader = new FileReader(); 

     // read the local file 
     reader.readAsDataURL(files[0]); 

     // set image data as background of div 
     reader.onloadend = function() { 
      _this.parent().find("div[id^=existImage3_]").hide(); 
      _this.parent().find("div[id^=imagePreview3_]").show().css("background-image", "url(" + this.result + ")"); 
     } 
    } 
});