2

ボタンを押すと別の要素が追加され、要素の名前も配列内で適切に増加するという問題があります。説明するのは難しいですが、スクリーンショットをいくつか提供します。

このサイトを検索したところ、解決策などがたくさん見つかりましたが、残念ながら、問題に適用できないようです。

これが私の欲望の出力のスクリーンショットです。

[追加]ボタンを押すと、その上に別のフィールドセットが表示されます

ここに画像の説明を入力してください

結果は次のようになります

ここに画像の説明を入力してください

したがって、[追加]ボタンをもう一度押すと、対応する増分入力タイプ名を持つフィールドセットの別の終わりのないサイクルが表示されます。

コード：

Fielsetのレイアウト

<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
    <div class="condition">
        <div class="clear"></div>
        <div>Label</div>
        <div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
        <div>URL to Like</div>
        <div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
    </div>
</fieldset>

機能を開始するためのコード

<a onclick="fb_likeus_add();">Add</a>

function fb_likeus_add() {
    var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';

    $("#fb_likeus_td").prepend(fieldset_data);
}

主な問題は、追加ボタンを押したときに、データをdivに追加するときに入力要素の名前をインクリメントする方法にあります。どこから、何から始めればよいのかわかりません。しかし、私はそれがどのように見えるべきかを考えました。

Array = [

div1 ['name_1', 'url_1'],

div2 ['name_2', 'url_2'],

div3 ['name_3', 'url_3'],

div4 ['name_4', 'url_4'],

div5 ['name_5', 'url_5']

and so on, it increments when you click the add button.

];

説明するのはちょっと難しいですが、それでも皆さんが私の問題を理解してくれることを願っています。皆さんが私を助けてくれたら嬉しいです、それはたくさんの意味があります。前もって感謝します。

4

1 に答える 1

1

これに対する1つの解決策は、挿入するマークアップを含むページのどこかに非表示の'template'divを配置することです。この特定のケースでは、マークアップは比較的単純なので、テンプレートのマークアップをJavaScript文字列として保存するだけで済みますが、ページで非表示のdivを使用するよりも一般的に保守性が低くなります。

いずれの場合も、テンプレートマークアップを取得したらfieldset、ページに新しいものを追加した回数を追跡するために、少量のJavaScriptコードを追加する必要があります。これにより、関数を更新fb_likeus_add()して、テンプレートマークアップで単純な文字列置換を実行し、divに追加する前に正しいシーケンス番号を挿入できます。

それは少し複雑に聞こえるかもしれませんが、実際にはごくわずかなコードしか必要としません。

//initialize this when the page loads
var numAdded = 0;

function fb_likeus_add() {
    //increment the counter
    numAdded++;  

    //grab the template html
    var templateHtml = $("#template").html();  

    //write the new count into the template html
    templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
                               .replace(/url_/g, "url_" + numAdded);  

    //prepend the updated HTML to the document  
    $("#container").prepend(templateHtml);  
};

次に例を示します：http： //jsfiddle.net/Dw8e7/1/

于 2013-01-18T07:02:52.447 に答える