Использование Wordpress Media Upload на нескольких кнопках?

Question

Следит кнопку HTML и текстовое поле:

<div class="meta-container"> 
    <div class="label col-2 left"> 
     <label class="squeeze-label">Imagem Logo:</label> 
    </div> 
    <div class="col-6"> 
     <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemLogo]" value="<?php echo $this->data['imagemLogo']; ?>" /> 
     <input class="definir_imagem_button button" type="button" value="Definir Imagem" /> 
     <a id="remover_imagem_logo" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a> 
     <p class="description">Imagem que ficará acima da headline.</p> 
    </div> 
</div> 

<div class="meta-container"> 
    <div class="label col-2 left"> 
     <label class="squeeze-label">Imagem Background:</label> 
    </div> 
    <div class="col-6"> 
     <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemBackground]" value="<?php echo $this->data['imagemBackground']; ?>" /> 
     <input class="definir_imagem_button button" type="button" value="Definir Imagem" /> 
     <a id="remover_imagem_background" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a> 
     <p class="description">Imagem que ficará no fundo da página. Por padrão será feito upload de uma nova imagem para o Wordpress, caso necessite será possível informar um link externo.</p> 
    </div> 
</div> 

И ниже следует JavaScript сделать кнопку класса «definir_imagem_button» открыть родной WordPress медиа загрузчика и вставить выбранный URL изображения в их соответствующем классе текстового поля «definir_imagem_url»:

$('.definir_imagem_button').click(function(e) 
{ 
    e.preventDefault(); 

    var custom_uploader = wp.media({ 
     title: 'Selecionar Imagem', 
     button: { 
      text: 'Definir Imagem' 
     }, 
     multiple: false // Set this to true to allow multiple files to be selected 
    }) 

    .on('select', function() 
    { 
     var attachment = custom_uploader.state().get('selection').first().toJSON(); 
     $('.definir_imagem_url').val(attachment.url); 
    }) 

    .open(); 

}); 

проблема заключается в том, что линия $('.definir_imagem_url').val(attachment.url); присваивает значение для всех полей класса и мне нужно значение, которое будет добавляться только в текстовом поле соответствующей кнопки, которая была нажата. Какой лучший способ сделать это?

Answer 1

Если вы знаете, что ваша структура HTML будет одинаковой для каждой кнопки, вы можете зафиксировать, какая кнопка была нажата, и использовать ее для поиска ближайшего входа .definir_imagem_url.

$('.definir_imagem_button').click(function(e) { 
    e.preventDefault(); 
    var btnClicked = $(this); 
    var custom_uploader = wp.media({ 
     title: 'Selecionar Imagem', 
     button: { 
      text: 'Definir Imagem' 
     }, 
     multiple: false // Set this to true to allow multiple files to be selected 
    }) 
    .on('select', function() { 
     var attachment = custom_uploader.state().get('selection').first().toJSON(); 
     $(btnClicked).parent().children('.definir_imagem_url').val(attachment.url); 
    }) 
    .open(); 
});