在多个按钮上使用 Wordpress 媒体上传？答案

【问题标题】：Using Wordpress Media Upload on multiple buttons?在多个按钮上使用 Wordpress 媒体上传？
【发布时间】：2014-10-09 00:57:44
【问题描述】：

跟随 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 媒体上传器，并在各自的文本字段类“definir_imagem_url”中插入选定的图像 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); 行为类的所有字段分配了值，我需要将该值仅添加到单击的相应按钮的文本字段中。有什么更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery wordpress upload media

【解决方案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();
});

【讨论】：