0

DRY (Dont Repeat Yourself) を学ぶ良い方法を見つけようとしています。たくさんの HTML を含むページがあります。HTML の 90% は繰り返されているので、それを解消する方法を見つけようとしています。

このページでいくつか質問があります。これらの質問はすべて同じ HTML コードですが、テキストが異なります。ここにプロジェクトのjsFiddleがありますhttp://jsfiddle.net/SBKyW/

    <div class="container_vragen">
        <p class="open_sub">&#x25BC; Heb je al je verplichtingen al geregeld?</p>
        <div class="antwoorden">
            <input id="ja" type="checkbox" value="ja" class="open_sub_ja"/><label for="ja">Ja</label>
            <input id="nee" type="checkbox" value="nee" class="open_sub_nee"/><label for="nee">Nee</label> 
            <div class="extra_info">?
                <div class="extra_info_popup">
                    Hidden tekst
                </div>
            </div>
        </div>  

        <div class="submenu">
            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>
            <p class="akkoord"><br/>Akkoord</p>
            <div class="close_submenu">
                X
                <div class="close_okay">Deze vraag sluiten</div>
            </div>
        </div>
    </div>

これは、1 つの質問に必要な html です。どの問題も構造は同じですが、明らかにテキストが異なります。

jQuery を使用して HTML コードを削減する最善の方法は何ですか?

4

1 に答える 1

2

特定の状況では、クライアント側のテンプレート（JavaScriptテンプレートとも呼ばれます）を使用すると、HTMLの繰り返しを回避するための良い方法になります。

基本的に、1つのHTML「テンプレート」を記述して、必要な数のオブジェクトに適用できます。

ただし、ページの読み込み時にHTMLが生成されるため、検索エンジンでHTMLが表示されることはないと確信しています。たぶん、私が間違っていれば、誰かがこれについて私を訂正することができますか？

とにかく、これがあなたが探しているものかもしれないと思うなら、そこには多くのJSテンプレートライブラリがあります。私は個人的に、John Resigによる非常に軽量なソリューションのわずかに変更されたバージョンを使用しています：http：//ejohn.org/blog/javascript-micro-templating/

乾杯

于 2013-01-16T14:30:08.207 に答える