web-dev-qa-db-ja.com

window.send_to_editorおよびjQuery .attr（）が複数のカスタムアップロード画像メタボックスと競合する

カスタム投稿タイプに2つのカスタムメタボックスを追加しました。 1つは「ヘッドショット」のカスタムフィールド値に格納される画像をアップロードすることであり、もう1つは「列ヘッドショット」のカスタムフィールド値に格納される画像をアップロードすることです。ニュースサイトです。

UI for Headshots

どちらも[メディアの追加]ウィンドウ枠で選択した画像のURLを非表示のフィールドに送信します。このフィールドは通常のプロセスでカスタムフィールドに投稿されます。ただし、投稿が保存または公開される前に選択した画像のプレビューも必要です。そのため、[メディアの追加]で画像が選択されると表示されるdivに含まれる画像のsrc属性をjQueryで更新します。ペイン問題は、最初の「標準ヘッドショット」ボックスで、画像が選択されると、「標準ヘッドショット」ボックスではなく、「列ヘッドショット」ボックスの画像のsrc属性が更新されることです。

私はこれが複数のwindow.send_to_editorインスタンスとの衝突によるものであると確信しています。私は当初、「通常のヘッドショット」を更新するとそのURLが間違った隠しフィールド（「列ヘッドショット」ボックス内のフィールド）にも送信されるという問題を抱えていました。 uploadID = jQuery(this).prev('input');

これで問題は解決しました。私はこのように変更したいソース属性のイメージを定義しようとしましたが、それは問題を解決しませんでした（そして、実際には、ソース属性が更新されなかったことを意味します）：changeID = jQuery(this).prev('img');

window.send_to_editorの複数のインスタンスをどう処理するかを尋ねる 既存の質問 がありますが、それらは私を助けませんでした。彼らの解決策がここでうまくいかないか、私はそれを間違って実装しています。

send_to_editor部分が正しい画像ソース属性を更新するように、または両方の画像が選択された後にプレビューを表示できるように、このコードを調整するにはどうすればよいですか。

以下は、最初の "Normal Headshot"ボックスで使用されているjQueryです。

jQuery(document).ready( function( $ ) {

$('#upload_image_button').click(function() {
    uploadID = jQuery(this).prev('input');
    formfield = $('#upload_image').attr('name');
    tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

    return false;
});


window.send_to_editor = function(html){


    headshotimgurl = $('img',html).attr('src');
    uploadID.val(headshotimgurl);

    jQuery("#imageurladder").attr("src", headshotimgurl);

    tb_remove();

    $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).show();

    $("#upload_image_button_clear").removeAttr("disabled");

}


  $("#upload_image_button_clear").click(function() {



 if (!$("#upload_image_button_clear").is(":disabled")) {

  $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).hide();

    $('#upload_image').val('');  

    $("#upload_image_button_clear").attr("disabled","disabled");

  }


 });


 });

以下は、2番目の「Column Headshot」ボックスで使用されるjQueryです。

jQuery(document).ready( function( $ ) {

$('#upload_column_button').click(function() {


    uploadID = jQuery(this).prev('input');
    formfield = $('#upload_column').attr('name');
    tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

    return false;


});


window.send_to_editor = function(html){



    columnimgurl = $('img',html).attr('src');
    uploadID.val(columnimgurl);


    jQuery("#columnurladder").attr("src", columnimgurl);

    tb_remove();

    $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).show();

    $("#upload_column_button_clear").removeAttr("disabled");


}


 $("#upload_column_button_clear").click(function() {



if (!$("#upload_column_button_clear").is(":disabled")) {

  $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).hide();

    $('#upload_column').val('');


    $("#upload_column_button_clear").attr("disabled","disabled");



   }


   });



   });
custom-post-typescustom-fieldjquerymetaboxuploads
1
Edmund Heaphy

私は最近似たようなことをしましたが、ThickBox https://codex.wordpress.org/Javascript_Reference/wp.media の代わりにwx.mediaをCodexの同じコードで使用しました。複数の入力で機能するようにする唯一のことは、グローバル変数からクリック関数にフレーム変数を移動することです。そのため、 'frame'はクリックごとに新鮮になります。

2
rzepak