Как динамически добавить новый экземпляр (скажем, текстовое поле или флажок) в виджеты 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;
        });
});