0

動的に複製/削除されるフォーム フィールドがあります

ここでフィドルを参照してください：http://jsfiddle.net/obmerk99/y2d4c/6/

この機能では、次のようにフィールドの名前 (および ID など) をインクリメントする必要もあります。

o99_brsa_settings[brsa_dash_wdgt_content][0]
o99_brsa_settings[brsa_dash_wdgt_content][1]
o99_brsa_settings[brsa_dash_wdgt_content][2] ...

それは機能していますが、問題は、フィールドを追加/削除すると、最後(実際には最初のフィールド)に到達すると、「未定義」になり、フィールドが追加されないことです。

問題を確認するには、 add/remove で少し「遊ぶ」必要があります。

主な問題は、[0] と [0][2] がある場合に、それらすべてを同じ配列レベルに保持する方法だと思います。

私は JS の第一人者ではありませんが、このコードは何らかの形でさまざまなソースから組み立てられたものです。しかし、私は今ちょっと立ち往生しているので、助けていただければ幸いです.

4

1 に答える 1

1

この方法を試してください：

$(function () {
    $(".addScnt").on("click", function () {
        var i = checkNumberOfElements();
        var scntDiv = $("div[id^='widget_dup']:last");
        var prevDiv = scntDiv.clone();
        var newname = $(prevDiv).find("textarea").attr("name").substring(0, $(prevDiv).find("textarea").attr('name').indexOf(']'));

        prevDiv.find('textarea').attr('name', newname + "][" + i + "]");
        prevDiv.find('textarea').attr('id', newname + "][" + i + "]");
        prevDiv.find('label').attr('for', newname + "][" + i + "]");
        prevDiv.attr('id', $(prevDiv).attr('id') + "_" + i);

        $(scntDiv).after(prevDiv);
    });

    $(document).on("click", ".remScnt", function (event) {
        var i = checkNumberOfElements();

        if (i <= 1) {
            return false;
        } else {
            var target = $(event.currentTarget);
            target.parent("div").remove();
        }
    });
});

function checkNumberOfElements() {
    // Number of textareas
    var i = $("textarea[name^='o99_brsa_settings[brsa_dash_wdgt_content]']").length;
    // Number of divs
    // var i = $("div[id^='widget_dup']").length;

    if (typeof i === undefined) {
        return 0;
    } else {
        return i;
    }
}

デモ: http://jsfiddle.net/y2d4c/7/

于 2013-11-01T13:46:06.570 に答える