jquery - 在一个页面上使用几个 Wordpress 上传表单

Question

我正在开发一个 Wordpress 插件。使用 Wordpress 的上传系统。基本上这是我的上传表单输入：

<input id="upload_image" type="text" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

其他必需的 js 和 css 文件也入队（包括）。最后，此 javascript 包含在页面中：

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 // show Wordpress' uploader modal box
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 // this will execute automatically when a image uploaded and then clicked to 'insert to post' button
 imgurl = jQuery('img',html).attr('src');
 // put uploaded image's url to #upload_image
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});

它工作得很好，没问题。但现在我想向页面添加一些上传表单。

<input class="upload_image" type="text" value="" />
<input class="upload_image_button" type="button" value="Upload Image" />

<input id="upload_image" type="text" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

<input id="upload_image" type="text" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

我用过class="upload_image"andclass="upload_image_button"而不是id="upload_image"andid="upload_image_button"

现在我必须更新我的 javascript 代码。

现在有几个上传按钮。但这不起作用：

jQuery(document).ready(function() {

jQuery('.upload_image_button').click(function() {
 formfield = jQuery('.upload_image_button').prev().attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('.upload_image_button').prev().val(imgurl);
 tb_remove();
}
});

我应该如何更新它？

Answer 1

jQuery(document).ready(function() {
var clicked = null;

jQuery('.upload_image_button').click(function() {
 clicked = jQuery(this);
 formfield = jQuery(this).prev('input').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 clicked.prev('input').val(imgurl);
 tb_remove();
}
});