Question

我正在创建一个Wordpress小部件。我希望用户输入他们的电话号码。默认情况下，窗口小部件应该只显示一个文本框，并在其下方显示“添加新”的链接。当用户点击链接时，第二个文本框应显示在第一个文本框下方，旁边有一个小（X），用于删除它。

此功能在Wordpress的后期编辑屏幕中。用户可以在那里动态“添加新类别”。这可以在Widgets中实现吗？

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;
        });
});

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

1 个答案: