Question

请帮助我使用此脚本dynamicField（http://www.quackfuzed.com/demos/jQuery/dynamicField/index.cfm）

原始输入元素必须是：

<input type='text' name='name_1' id='name_1' value='' class='textInput removable' />

但我需要这个： <input type='text' name='name_1[]' id='name_1[]' value='' class='textInput removable' />（当我这样做时，脚本不起作用。）

所以我需要在name_1后添加 [] 。是否需要编辑此代码，但我不知道如何...

//jQuery dynamicField plugin
//Copyright 2009, Matt Quackenbush (http://www.quackfuzed.com/)

//Find usage demos at http://www.quackfuzed.com/demos/jQuery/dynamicField/index.cfm)
//Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
//and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

//Version: 1.0
//Date:  8/13/2009

;
(function($) {
    $.fn.dynamicField = function(options) {
        if ( $(this).attr("id") == undefined ) {
            alert("The dynamicField plugin could not be initialized.\n\nPlease check the selector.");
            return $;
    }

    var f = $(this);

    var settings = $.extend({
        maxFields: 5,
        removeImgSrc: "images/icons/cross.png",
        spacerImgSrc: "images/spacer.gif",
        addTriggerClass: "add-field-trigger",
        removeImgClass: "remove-field-trigger",
        hideClass: "hide",
        cloneContainerId: f.attr("id").replace(/^(.+)([_-][0-9]+)$/,"$1"),
        rowContainerClass: f.attr("class"),
        labelText: f.children("label")
                        .html(),
        baseName: f.children("input")
                            .attr("name")
                            .replace(/^(.+[_-])([0-9]+)$/,"$1"),
        addContainerId: "add-" + f.children("input")
                            .attr("name")
                            .replace(/^(.+)([_-][0-9]+)$/,"$1")
                            .replace(/_/g,"-") + "-container"
    },options);

    var getFields = function() {
        return $("div." + settings.rowContainerClass);
    };

    // handle hide/show, etc
    var addRemoveBtnCk = function() {
        var fields = getFields();
        var len = fields.length;

        fields.each(function(i,elem) {
            $(elem)
                .children("img")
                .attr({
                    "src":(len == 1) ? settings.spacerImgSrc : settings.removeImgSrc,
                    "class":(len == 1) ? "" : settings.removeImgClass
                });
        });

        if ( len > (settings.maxFields-1) ) {
            $("div#" + settings.addContainerId).addClass(settings.hideClass);
        } else {
            $("div#" + settings.addContainerId).removeClass(settings.hideClass);
        }
    };

    // handle field removal
    $("img." + settings.removeImgClass).live("click",function() {
        // remove the selected row
        $(this).parent("div." + settings.rowContainerClass).remove();

        // rebrand the remaining fields sequentially
        getFields().each(function(i,elem) {
            var pos = new Number(i+1);
            var d = $(elem)
                        .attr("id",settings.cloneContainerId + "-" + pos);

            d.children("label")
                        .attr("for",settings.baseName + pos)
                        .html((pos > 1) ? "" : settings.labelText);

            d.children("input")
                        .attr({
                            "id":settings.baseName + pos,
                            "name":settings.baseName + pos
                        });
        });

        addRemoveBtnCk();
    });

    // handle field add
    $("div#" + settings.addContainerId + " span." + settings.addTriggerClass).click(function() {
        var len = getFields().length;
        var pos = new Number(len+1);
        var newDiv = f
                        .clone()
                        .attr("id",settings.cloneContainerId + "-" + pos)
                        .addClass(settings.rowContainerClass);

        newDiv.children("label")
                        .attr("for",settings.baseName + pos)
                        .html("");

        newDiv.children("input")
                        .attr({
                            "id":settings.baseName + pos,
                            "name":settings.baseName + pos,
                            "value":""
                        });

        newDiv.children("img")
                        .attr("src",settings.removeImgSrc);

        if ( len > 0 ) {
            $("div#" + settings.cloneContainerId + "-" + len).after(newDiv);
        } else {
            $("div#" + settings.addContainerId).before(newDiv);
        }

        addRemoveBtnCk();
    });
};
})(jQuery);

谢谢大家。

Answer 1

如果您需要使用粘贴的代码，我觉得您可以更改此部分：

newDiv.children("input").attr({
    "id":settings.baseName + pos + "[]",
    "name":settings.baseName + pos + "[]",
    "value":""
});

PS：它在你的// handle field add部分：）

我个人已经这样做了，没有修改你粘贴的代码，使用这个技巧：

$(function() {
    $('myinput').attr('name', $('myinput').attr('name') + '[]');
    $('myinput').attr('id', $('myinput').attr('id') + '[]');
});

动态更改元素属性

1 个答案: