WordPress media Uploader jQuery multi button 如何获得不同的值

Question

WordPress媒体上传器jQuery多按钮只获取一个值(获取所有按钮的相同值(我不知道如何获得使用多按钮的确切值？ 我犯了什么错误？.

我的jQuery代码：

jQuery(document).ready( function($){
var mediaUploader;
$('.upload-button').on('click',function(e) {
e.preventDefault();
var buttonID = $(this).data('group');
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame =wp.media({
title: 'Choose a Hotel Picture',
button: {
text: 'Choose Picture'
},
multiple:false
});
mediaUploader.on('select', function(){
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#profile-picture'+buttonID).val(attachment.url);
$('#profile-picture-preview'+buttonID).css('background-image','url(' + attachment.url + ')');
});
mediaUploader.open();
}); });

我的PHP/HTML代码：

<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture" value="'.$picture1.'">
<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture" value="'.$picture2.'">

与往常一样，任何帮助都非常感谢。

Answer 1

您可以使用以下更新的 HTML 代码：

<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture1.'">
<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture2.'">