我创建了添加/删除字段来收集数据，例如会员图片，会员姓名，会员电子邮件，会员角色和会员FB ID。 一切都很完美。
我面临的唯一问题是，当我想用新图像更改成员的已保存图像时，它只会更改第一个图像。意味着如果我尝试更改第二个、第三个或下一个成员的图像，它只会更新第一个图像。这仅适用于预先保存的图像。
如果我添加一个新成员，那么它就可以完美运行。
以下是代码：
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<?php
$member_details = $wpdb->get_var( $wpdb->prepare( "SELECT member_details FROM {$wpdb->prefix}project_members WHERE author_id = %s AND project_id = %s", $current_user_id, $project_id ) );
$member_details_decode = json_decode( $member_details, true );
?>
<div class="row">
<div class="col-md-4">
<?php
if ( ! empty( $member_details_decode['member_images'][0] ) ) { ?>
<img src="<?php echo site_url( '/wp-content/img/member-images/' ); echo $member_details_decode['member_images'][0]; ?>" class="img-thumbnail" id="output_member0">
<?php } else { ?>
<img src="<?php echo site_url( '/wp-content/assets/img/blank-image.png' ); ?>" class="img-thumbnail" id="output_member0">
<?php }
?>
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]" value="<?php if ( $member_details_decode['member_names'][0] != '' ) echo esc_attr( $member_details_decode['member_names'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]" value="<?php if ( $member_details_decode['member_emails'][0] != '' ) echo esc_attr( $member_details_decode['member_emails'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]" value="<?php if ( $member_details_decode['member_roles'][0] != '' ) echo esc_attr( $member_details_decode['member_roles'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]" value="<?php if ( $member_details_decode['member_fbs'][0] != '' ) echo esc_attr( $member_details_decode['member_fbs'][0] ); ?>">
</div>
</div>
</div>
<?php
$member_count = count( $member_details_decode['member_images'] );
for ( $i=1; $i < $member_count; $i++ ) { ?>
<div class="all-member-fields"><hr>
<div class="row">
<div class="col-md-4">
<?php
if ( ! empty( $member_details_decode['member_images'][$i] ) ) { ?>
<img src="<?php echo site_url( '/wp-content/img/member-images/' ); echo $member_details_decode['member_images'][$i]; ?>" class="img-thumbnail" id="output_member0">
<?php } else { ?>
<img src="<?php echo site_url( '/wp-content/assets/img/blank-image.png' ); ?>" class="img-thumbnail" id="output_member0">
<?php }
?>
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]" value="<?php if ( $member_details_decode['member_names'][$i] != '' ) echo esc_attr( $member_details_decode['member_names'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]" value="<?php if ( $member_details_decode['member_emails'][$i] != '' ) echo esc_attr( $member_details_decode['member_emails'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]" value="<?php if ( $member_details_decode['member_roles'][$i] != '' ) echo esc_attr( $member_details_decode['member_roles'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]" value="<?php if ( $member_details_decode['member_fbs'][$i] != '' ) echo esc_attr( $member_details_decode['member_fbs'][$i] ); ?>">
</div>
</div>
</div>
<button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div>
<?php }
?>
<div id="member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
我的Javascript代码：
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById('output_member' + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", '#remove-member-fields', function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$('#add-member-fields').click(function() {
i++;
var rows = `<div class="all-member-fields"><hr><div class="row"><div class="col-md-4"><img src="<?php echo esc_url( site_url('/wp-content/assets/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-md-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div>`;
$(rows)
.fadeIn("slow")
.appendTo('#member-fields');
return false;
});
});
</script>
您忘记将$i添加到preview_member()并在循环中对id进行映像
您的preview_member()函数每次都会更改 idoutput_member0的元素。
在for循环中：
将图像 ID 从id="output_member0"更改为id="output_member<?= $i ?>"
将onchange="preview_member(event, 0)"更改为onchange="preview_member(event, <?= $i ?>)"