配列がjqueryのループ内にある関数内で動作していません

Question

私は一言で言えば、そのworpress mediauploaderに固執しています。私は画像をアップロードしたい、一つの機能は一つの画像用だが、一意のIDを持つ複数のアップロードボタンがあるので、ループを作成した理由、選択されたイメージ、私は値のそのイメージのURLを取得していません。 plsはjqueryとjavascriptを初めて利用します。 （あなたがなど、あなたのIDを保持しなければならない場合）here

jQuery(document).ready(function($){ 
var b = ["#upload-button-1", "#upload-button-2", "#upload-button-3","#upload-button-4","#upload-button-5","#upload-button-6","#upload-button-7","#upload-button-8"]; 

var d =[".procircle-1", ".procircle-2",".procircle-3",".procircle-4",".procircle-5",".procircle-6",".procircle-7",".procircle-8"]; 
var j; 
var c = ["#grid-image-1", "#grid-image-2", "#grid-image-3","#grid-image-4","#grid-image-5","#grid-image-6","#grid-image-7","#grid-image-8"]; 
var i; 

for(i=0; i<=b.length; i++) 
    { 
     for(j=0;j<=c.length;j++){ 
     $(b[i]).on('click',function(e){ 
      e.preventDefault(); 
      if(mediaUploader){ 
      mediaUploader.open(); 
      return; 
      } 

      mediaUploader = wp.media.frames.file_frame= wp.media({ 

       title:'Choose a Picture for Procedure ', 
       button:{ 
        text:'Choose Picture' 
       }, 
       multiple:false             
      }); 


      mediaUploader.on('select',function(){ 

       attachment= mediaUploader.state().get('selection').first().toJSON(); 
       $(c[j]).val(attachment.url); 
       $('.procircle-2').css({'background':'url(' + attachment.url + ')','background-repeat': 'no-repeat'}); 

      }); 


     mediaUploader.open(); 

     }); 
     } 
    } 
}); 

Answer 1

>これはそれらの1 これは私がwant-事のスクリーンショットである様々な方法を試してみました、私は次のことをやってお勧めします：

$(document).on('click', '#upload-button-1, #upload-button-2, #upload-button-3, #upload-button-4, #upload-button-5, #upload-button-6, #upload-button-7, #upload-button-8', function(e) { 
    var match = e.target.id.match(/(\d+)/g); 
    e.preventDefault(); 
    if(mediaUploader) { 
     mediaUploader.open(); 
     return; 
    } 

    mediaUploader = wp.media.frames.file_frame = wp.media({ 
     title:'Choose a Picture for Procedure ', 
     button:{ 
      text:'Choose Picture' 
     }, 
     multiple:false             
    }); 

    mediaUploader.on('select', function(){ 
     var attachment = mediaUploader.state().get('selection').first().toJSON(); 
     var id = '#grid-image-' + match[1]; 
     $(id).val(attachment.url); 
     $('.procircle-2').css({'background':'url(' + attachment.url + ')','background-repeat': 'no-repeat'}); 
    }); 

    mediaUploader.open(); 
}); 

をこれによりループが削除され、ハンドラが委譲されるため、現在のようにループごとに1つのクリックハンドラを作成するだけでなく、メディアローダの選択ハンドラも1つ作成します。最後に、対応する入力を、クリックを行ったイベントターゲットと一致させます。うまくいかなければならないかもしれませんが、ちょっと試してみる必要がありますし、間違いなくリファクタリングしてより良いものにすることができます。それが役に立てば幸い。