it-swarm.com.ru

Как: JQuery несколько кнопок WordPress Media Uploader на той же странице параметров?


Я хочу вызвать WordPress Media Uploader с помощью кнопки на странице настроек моей темы. Дело в том, что мне нужно три кнопки загрузки медиа на одной странице. Я пытаюсь сделать это, используя JQuery несколько идентификаторов селектора. Код работает нормально: я нажимаю кнопку и запускается средство загрузки мультимедиа, однако, когда я загружаю что-либо в первое поле ввода, только что загруженный мультимедиа передается в другие поля ввода на странице. Как будто они были связаны вместе. Извините за глупый вопрос, я не знаю много JavaScript. Но в любом случае, как я могу это исправить ??

jQuery(document).ready(function( $) {
var mediaUploader;
$('#upload-button-1, #upload-button-2, #upload-button-3').on('click', function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Upload', 
button: {
    text: 'Upload'
},
multiple: false
});

mediaUploader.on('select', function () {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);
$('.favicon-preview, .gravatar-preview, .thumbnail-preview')
.css('background','url(' + attachment.url + ')');

});

mediaUploader.open();

});
});
1
Lola Bittencourt

На данный момент происходит то, что вы назначаете выбранный элемент мультимедиа для всех трех входов в следующей строке:

j('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

Чтобы передать значение только одному из них, вам нужно изменить эту строку, чтобы она реагировала на какой-то маркер, установленный в кнопках. В приведенном ниже примере я установил атрибут data в кнопке, на которую ссылается javascript.

Итак, если у вас есть этот HTML:

<!-- upload buttons -->
<input type="button" class="upload-button" data-target="input_1" value="Upload button 1" />
<input type="button" class="upload-button" data-target="input_2" value="Upload button 2" />
<input type="button" class="upload-button" data-target="input_3" value="Upload button 3" />

<!-- inputs to receive the value -->
<input type="text" id="input_1" value="" />
<input type="text" id="input_2" value="" />
<input type="text" id="input_3" value="" />

Теперь вы можете сделать это в JS:

jQuery(function($) {

    $(document).ready(function () {

            var mediaUploader;

            // we can now use a single class name to reference all upload buttons
            $('.wp-admin').on('click', '.upload-button', function(e) {

                e.preventDefault();                

                // store the element that was clicked for use later
                trigger = $(this);

                if( mediaUploader ){
                    mediaUploader.open();
                    return;
                }

                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Upload', 
                    button: {
                        text: 'Upload'
                    },
                    multiple: false
                });

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

                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // we're replacing this line:
                    //$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

                    // assign the value of attachment to an input based on the data-target value
                    // of the button that was clicked to launch the media browser
                    $('#' + trigger.data('target') ).val(attachment.url);

                    $('.favicon-preview, .gravatar-preview, .thumbnail-preview').css('background','url(' + attachment.url + ')');
                });

                mediaUploader.open();

            });            

    });

});

Обновление

Основываясь на вставленном вами коде, вы можете сделать его гораздо более эффективным, например:

function sweetlola_images(){

    $imgs = array(
        'gravatar'  => 'img_1',
        'thumbnail' => 'img_2',
    );

    foreach( $imgs as $name => $id ){

        // get the image
        $url = esc_attr( get_option( $name ) );

        // if there isn't one, set $gravatar as empty string
        $url = $url ? $url : '';

        //upload button
        echo '<input type="button" data-target="' . $id . '"  value="Upload" class="button button-secondary upload-button" />';

        //input text field
        echo '<input type="text" id="' . $id . '" name="' . $name . '" value="' . $url . '" />';

        if( empty( $url ) ){ //if the value is empty this will show a just the upload button
            echo '<input type="button" value="Remove" data-remove_target="' . $id . '" class="button button-secondary" />';
        }

        // note
        echo '<p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; 

    }
}

Поместите ваши три типа изображений в массив $imgs и сгенерируйте их все с помощью одной функции.

0
shahar

У меня на самом деле есть HTML внутри функции PHP:

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){ //if the value is empty this will show a just the upload button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload buton
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';//input text field
} else { //otherwise it will show an upload and a remove button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload button
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" /> //input text field
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" /><p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; //remove button
}
}

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" />
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
}
}

function sweetlola_blog_thumbnail(){
$thumbnail = esc_attr( get_option( 'thumbnail_img' ));
if ( empty ($thumbnail) ){
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="" />
<p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="'.$thumbnail.'" />
<input type="button" value="Remove" id="remove-button-3" class="button button-secondary" /><p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
}
}
0
Lola Bittencourt