javascript - 使用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 是字段的 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 函数(而不是 show())淡入字段，或任何其他动画出现时。

希望您能使用它!祝你好运!