[英]Using Wordpress Media Upload on multiple buttons?
遵循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);
為該類的所有字段分配值,我只需要將該值添加到已單擊的相應按鈕的文本字段中。 有什么更好的方法可以做到這一點?
如果您知道每個按鈕的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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.