0

したがって、jqueryを使用してdivのクローンを作成し、入力配列のサイズを動的に保つことができるようにします。正常に動作していますが、クローンの前にクラスを追加して、クローンの後に古いadd moreリンクを削除し、クローンからクラスを削除した後にremoveを実行すると、より効率的に実行できると考えて仕方がありません。または、おそらくこれを行うための全体的により効率的な方法。

ここにhtmlがあります：

<div class="reg_heading_description" id="bio_brothers"></div>
                <div class="bio_brother">
                    <div class="clearfix">
                    <label>First Name</label>
                        <div class="input">
                        <input type="text" name="bio_brother_first[]" style="float:left"/>
                    <label>Last Name</label>
                        <input type="text" name="bio_brother_last[]" style="margin-left:20px;"/>                            
                        </div>                          
                    </div>
                    <div class="clearfix">
                    <a href="#" class="more_bio_brother more_relatives" >Add Another</a>
                    </div>
                </div>
            </div>

そしてここにjqueryがあり、そうです、競合なしモードです

<script type="text/javascript">
jQuery(document).ready(function () {

    jQuery(".more_bio_brother").click(function () {
        var here = jQuery(this).closest('div').parent();
        var names = jQuery(here).find('input');
        //validate
        var check = 0;
        jQuery.each(names, function () {
            if (jQuery(this).val() == "") {
                check = 1;
            }
        });
        if (check == 1) {
            alert('You must enter a first and last name for this biological brother before you can add another.');
            return false;
        }
        //disable prior 
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', true);
        });
        //add new
        jQuery(here).addClass('old');
        jQuery('#bio_brothers').before(jQuery(here).clone(true));
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', false);
            jQuery(this).val("");
        });
        jQuery(here).removeClass('old');
        jQuery('.old a').remove();
        return false;
    });
});
</script>
4

2 に答える 2

1

あなたの目標を達成し、それをより効率的にするために、おそらく少なくとも半ダースの完全に有効な方法があります。私の2セントの場合、次のようになります。

A）ページに「新規追加」リンクを1つだけ残し、それにイベントをバインドし、クローンを作成して破棄しないでください。「新規追加」には、常に1つのジョブ、つまり新しい空のフォームの追加があります。

B）「新規追加」では、HTML文字列または接続されていないDOMノードのいずれかとして、ミニフォームをすぐに使用できます。前者の場合は、文字列を使用して、必要な場所に追加します。後者の場合は、クローンを作成して、必要な場所にアタッチします（オリジナルはまだアタッチされておらず、次回の準備ができています）。後者を実行したい場合は、ページが最初に初期化されるときに、「テンプレート」として複製できる空のフォームがあります。

C）「新規追加」でも、フォーム要素を無効にするというあなたのアイデアが気に入っているので、これを続けます。

コードサンプルがないことをお詫びしますが、うまくいけば、これはあなたにアイデアを与えるでしょう。

于 2011-12-15T19:57:47.583 に答える
1

あなたが求めた以上のものが欲しいですか？

同様の状況で、実際に処理を実行したり、イベントを添付したり、要素のグループにデータを追加したりしました（検証、イベントの変更など）。各「行」に削除ボタンもありました。したがって、データやイベントなどのクローンを作成するだけでなく、クローンを作成する必要がありましたが、常にそうとは限りませんでした。最後の行の前、最後などに新しいものが必要になることがありました。

また、カスタム行加算器をチェーンできるようにしたかったのです。

また、存在するデフォルトの「空白」行の数も必要でした。

だから、あなたの構造（わずかに変更された）を考えると、私はこれを思いついた：http: //jsfiddle.net/BGJNP/

編集：規定されているようにいくつかの検証があるバージョンを追加しました： http：//jsfiddle.net/BGJNP/1/

于 2011-12-15T19:14:58.993 に答える