我正在创建一个WordPress小部件，在小部件后端，我赋予了添加和删除输入字段块的能力。我有能力添加和删除大部分工作。我的问题是，当我试图重新编号字段名称，使他们$_POST作为一个格式良好的数组，从来没有重复的索引。我所尝试的一切都只会引起不同的问题。我目前正在工作的代码是有问题，我不能钉下来。有时，当我添加一个字段时，计数器似乎是成倍的。当我删除一个块并重新计算和编号字段时字段永远不会回到0，甚至1。感觉好像方块被计数了不止一次，或者有些方块被移走了还在计数。
我试着看看源代码，看看是否有更多的块被添加，然后我想，但我猜块我添加这种方式不显示在源代码中，直到小部件已保存。
这是用于和、删除和重新编号的Javascript。
jQuery(document).ready(function() {
/*--start toplist_widget--*/
function renumber_blocks() {
jQuery(".eyenodtoplistitem li").each(function(index) {
jQuery(this).find("input").each(function() {
this.name = this.name.replace(/eyenod_toplist'['d+']/, "eyenod_toplist[" + index + "]");
});
jQuery(".eyenodtoplistitem li input[type=hidden]").val(index);
});
}
tl_count = 0;
jQuery('.toplist-add').unbind('click').bind('click', function(e) {
var appendhtml = '<li>' +
'<div style="height:20px; background:#EAEAEA;"></div>' +
'<input type="hidden" name="eyenod_toplist[' + tl_count + '][id]" value="' + tl_count + '" />' +
'<label for="eyenod_toplist_imgurl">Image URL:</label><input class="widefat" type="text" name="eyenod_toplist[' + tl_count + '][imgurl]" value="" /><br />' +
'<label for="eyenod_toplist_bonus">Bonus:</label><input class="widefat" type="text" name="eyenod_toplist[' + tl_count + '][bonus]" value="" /><br />' +
'<label for="eyenod_toplist_link">Visit URL:</label><input class="widefat" type="text" name="eyenod_toplist[' + tl_count + '][link]" value="" /><br />' +
'<a class="toplist-remove" href="javascript:void(0);">Delete</a>' +
'</li>';
jQuery('.eyenodtoplistitem').append(appendhtml);
renumber_blocks();
e.preventDefault();
});
jQuery(".eyenodtoplistitem").on("click", ".toplist-remove", function (e) {
jQuery(this).closest("li").remove();
renumber_blocks();
e.preventDefault();
});
/*--end toplist_widget--*/
});
这是用于将小部件添加到系统中的表单函数。
public function form( $instance ) {
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('Top List', 'eyenod');
}
$instance_eyenod_toplist = array();
if(isset($instance['eyenod_toplist'])) {
$instance_eyenod_toplist = unserialize($instance['eyenod_toplist']);
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'eyenod' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<div class="toplist-field-container">
<ol class="eyenodtoplistitem" style="padding: 10px 0px;">
<?php if(!empty($instance_eyenod_toplist)) { ?>
<?php foreach($instance_eyenod_toplist AS $eyenod_toplist) { ?>
<li>
<div class="handle" style="height:20px; background:#EAEAEA;"></div>
<input type="hidden" name="eyenod_toplist[<?php echo $eyenod_toplist['id']; ?>][id]" value="<?php echo $eyenod_toplist['id']; ?>" />
<label for="eyenod_toplist_imgurl">Image URL:</label><input class="widefat" type="text" name="eyenod_toplist[<?php echo $eyenod_toplist['id']; ?>][imgurl]" value="<?php echo $eyenod_toplist['imgurl']; ?>" /><br />
<label for="eyenod_toplist_bonus">Bonus:</label><input class="widefat" type="text" name="eyenod_toplist[<?php echo $eyenod_toplist['id']; ?>][bonus]" value="<?php echo $eyenod_toplist['bonus']; ?>" /><br />
<label for="eyenod_toplist_link">Visit URL:</label><input class="widefat" type="text" name="eyenod_toplist[<?php echo $eyenod_toplist['id']; ?>][link]" value="<?php echo $eyenod_toplist['link']; ?>" /><br />
<a class="toplist-remove" href="">[Delete]</a>
</li>
<?php } ?>
<?php } ?>
</ol>
</div>
<div style="padding: 10px 0px;">
<a class="toplist-add" href="">[Add]</a>
</div>
<?php
}
OK，我在测试时放入了一些警告代码，以查看正在循环的HTML，似乎我的代码正在循环不存在的列表项。我不知道为什么会这样。我想再次指出，这一切都是在我的WordPress安装的wp-admin/widgets.php页面上完成的。我可能错了，但这可能很重要。
提前感谢您的帮助。
好的，我已经找到了问题所在。以前我不知道Wordpress在页面左侧的选择区域中存储了一个小部件表单的副本。这是一个没有编号ID的默认版本，但它确实共享您在代码中使用的类等。这就是问题所在，因为我是根据列表的类循环遍历列表项。所以我添加了Wordpress用来给每个小部件一个唯一ID的代码，并内联了我的javascript，这样我就可以使用那个ID作为选择器。这也指出了一些我以前没有注意到的其他问题。然而，我能够解决这些新问题，现在有了工作代码。
对于任何需要知道的人来说，这是让我走上正确轨道的代码。
$this->get_field_id();