如何在 WordPress 小部件中动态添加新实例（例如文本字段或复选框）？

Question

我正在创建一个 WordPress 小部件。我希望用户输入他们的电话号码。默认情况下，小部件应仅显示一个文本框及其下方的一个链接，其中显示“添加新内容”。当用户单击该链接时，第二个文本框应出现在第一个文本框下方，旁边有一个小 (X)，用于将其删除。

此功能位于 WordPress 的帖子编辑屏幕中。用户可以在那里动态“添加新类别”。这可以在小部件中实现吗？

Answer 1

当然。从小部件底部的 HTML 开始：

<h2><a href="#" id="addNew">Add New</a></h2>
<div id="numbers">
    <p>
        <label for="numbers"><input type="text" id="p_number" size="20" name="p_number" value="" placeholder="Input Number" /></label>
    </p>
</div>

现在来一点 jQuery：

$(function() {
        var nmbrsDiv = $('#numbers');
        var i = $('#numbers p').size() + 1;

        $('#addNew').live('click', function() {
                $('<p><label for="numbers"><input type="text" id="p_number_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Number" /></label> <a href="#" id="remNew">Remove</a></p>').appendTo(nmbrsDiv);
                i++;
                return false;
        });

        $('#remNew').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});