Динамически добавляется поле в разных формах с использованием Jquery

Question

Мне бы хотелось, чтобы поле сначала не отображалось, но если пользователь решил ввести его, оно появится в форме.

Я могу использовать Jquery и сделать что-то вроде

$('input[example]')
    .bind('click', function() {
        $('#clickfield')
            .append('<input id="new_field" name="MODEL[new_field]" size="30" type="text">');

Однако я хотел бы добавить это поле в нескольких различных формах для разных моделей. Поскольку название модели находится в поле, как бы я написал сценарий Jquery модульным, чтобы я мог использовать один и тот же сценарий для всех моих форм?

Answer 1

Одним из решений является создание функции с именами, которые вы хотите использовать в качестве входных параметров:

addInput(form, id, modelName) {
    $(form).append(
             '<input id="'+id+'" name="'+modelName+'['+id+']" size="30" type="text">'
            );
}

Где form будет селектором поля ('#clickfield' в примере), id будет идентификатором нового поля ввода, а modelName будет названием модели, которую вы упомянули.

Другое решение, при условии, что 'input[example]' выбирает какую-то кнопку или область, активируемую нажатием, которая вызывает событиепоказ поля;и '#clickfield' - это какая-то div или span или какая-то область, где вы будете показывать свое поле, для загрузки этих скрытых полей с сервера, в стиле display:none, с мнемоническим классом, чтобы вы могли сделать что-то вродеопределите функцию:

showField(clickable, class) {
    $(clickable).click(
        function(){
            $(class).show();
        }
    );
}

, а затем:

$(document).ready(
    showField('input[example1]', '.class1');
    showField('input[example2]', '.class2');
    showField('input[example3]', '.class3');
    //              .
    //              .
    //              .
    // One line for every clickable area that triggers
    // the event of showing a field, and the class of the
    // field to show
);

, чтобы вы могли добавить некоторые удобные для пользователя функции, такие как добавление поля в поле с помощью функции fadeIn() Jquery (вместо *).1022 *), или любая другая анимация при появлении.

Надеюсь, вы могли бы использовать его!удачи!