使用Jquery动态添加不同形式的字段

Dynamically added a field in different forms using Jquery

本文关键字：字段 Jquery 动态 添加 使用      更新时间：2023-09-26

我希望有一个字段一开始不显示，但如果用户决定输入它，那么它将出现在表单中。

我可以用Jquery做一些像

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

但是，我想为不同的模型以几种不同的形式添加这个字段。由于模型名称在字段中，我将如何编写Jquery脚本是模块化的，所以我可以使用相同的脚本为所有的表单?

一个解决方案是用你想要的名字作为输入参数创建一个函数:

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())，或任何其他动画出现。

希望你能使用它!好运！

相关文章：