Question

我正在创建一个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 
}

确定我在测试时输入了一些警报代码，以查看循环播放的HTML，似乎我的代码循环遍历不存在的列表项。我不知道为什么会这样。我想再次指出，这都是在我的WordPress安装的wp-admin / widgets.php页面上完成的。我可能错了，但这可能很重要。

提前感谢您的帮助。

Answer 1

好的，我发现了什么问题。以前我不知道Wordpress在页面左侧的选择区域内存储了窗口小部件表单的副本。这是一个没有编号ID的默认版本，但它确实共享了您在代码中使用的类。这是问题所在，因为我基于列表的类循环遍历列表项。所以我添加了Wordpress使用的代码，为每个小部件提供了一个唯一的ID，并且只是内联了我的javascript，因此我可以将该ID用作选择器。这也指出了我之前没有注意到的一些其他问题。但是，我能够修复这些新问题，现在已经有了工作代码。

对于任何需要知道的人来说，这就是让我走上正轨的代码。

$this->get_field_id();

动态添加和删除字段后重新编号表单输入数组

1 个答案: