Segue o código HTML do botão e campo de texto:
<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>
E o seguinte javascript para fazer com que ao clicar sobre o botão de classe "definir_imagem_button" abra o media uploader nativo do Wordpress e ao inserir a imagem selecionada, coloque a URL da imagem no campo de texto de classe "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();
});
Dúvida/Problema:
Como eu tenho múltiplos botões e campo de texto para fazer upload de imagens e inserir a URL da imagem no seu respectivo campo de texto, utilizei como classe, pois antes disso eu precisava recriar o código javascript para cada botão de upload, utilizando ID ao invés de class. Utilizando class fica mais organizado e não preciso reescrever o código javascript toda vez que adicionar um novo campo de upload/upload de imagens.
O problema é que nesse caso ao selecionar e fazer upload da imagem e defini-la, a URL(attachment.url) é passada para todos os campos com a classe "definir_imagem_url". Obviamente poderia utilizar uma ID ao invés de classe, porém quero que isso seja feito de forma dinâmica, sem precisar ficar adicionando ID toda vez que criar um campo de upload de imagens novo.
Nesse caso, como fazer para que a URL(attachment.url) seja adicionada ao respectivo campo de texto, definido pela classe "definir_imagem_url" e não para todos que tenham essa mesma classe definida?
this
dentro desse.on('select'
? Já testou$(this).val(attachment.url);
?