javascript - WP 媒体库 - 选择函数不更新 ID 更新的行索引

Question

我正在开发一个 WordPress 博客，在每个帖子的编辑页面上都有一个自定义元框。
该元框由表格组成，每行包含从媒体库中选择的图像源。

现在添加的每个新行都有一个 ID:
第 1 行:img_metabox_src_0
第 2 行:img_metabox_src_1
第 3 行:img_metabox_src_2

表格标题如下:

<小时/>

----图片 ------ |-------- URL(输入文本框)------ | -------- 选择图片(输入提交)------ | -----删除图片(输入提交)--------

<小时/>

现在，单击任意行上的“选择图像”时，我从 jquery 检索行索引，然后发送:“img_metabox_src_”+index 到 file_frame.on( 'select', function() 以进行 url 更新。

即

 jQuery('tr #select_image').off().on('click', function( event ){

event.preventDefault();


var row_index = jQuery(this).closest('tr').index();
var id = "img_metabox_src_" + row_index;

//******** 1 ***********
console.log('row_index');
console.log(row_index);

console.log(id);
console.log(jQuery('#' + id));


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


file_frame = wp.media.frames.file_frame = wp.media({
                                        title: "Select/Upload Image",
                                        button: {
                                                text: "Select",
                                                },
                                        library : { type : 'image'},
                                        multiple: false
                                       });


file_frame.on( 'select', function() {
                         attachment = file_frame.state().get('selection').first().toJSON();

                         // "mca_features_tray" is the ID of my text field that will receive the image
                         // I'm getting the ID rather than the URL:

                         // but you could get the URL instead by doing something like this:
                         //******** 2 ***********
                         console.log(id);
                         console.log(jQuery('#' + id));
                         jQuery('#' + id).attr('value',attachment.url);
                         id = null;
});

现在，

情况 1:当我第一次单击行索引 3 时，URL 会在 img_metabox_src_3 上更新。

情况 2:但之后，无论我点击哪一行，img_metabox_src_3 上的网址都会更新。

另外在添加日志时，我得到

(对于情况 2，假设我单击了行索引 1):

//******** 1 **********
行索引:1
ID:img_metabox_src_1

//******** 2 **********
ID:img_metabox_src_3

即file_frame.on( 'select', function() {,
内ID 值更改为首次单击的值。

请帮助了解如何将更新的行索引/id 传递给选择函数

Answer 1

谢谢，我使用了全局概念:

function set_row_index (ind){
row_index = ind;
}

function get_row_index(){
return row_index;
}

jQuery(document).ready(function(){

jQuery('tr input.select_media_library').off().on('click', function( event ){

event.preventDefault();
var index = jQuery(this).closest('tr').index();
**set_row_index(index);**
.
.
.

file_frame.on( 'select', function() {
                         attachment = file_frame.state().get('selection').first().toJSON();
                         **index = get_row_index();**
                         var id = "img_src_" + index;
                         jQuery('#' + id).attr('value',attachment.url);
                  });
file_frame.open();
});