Question

我正在努力寻找一种学习DRY的好方法（不要重复自己）。我有一个包含大量HTML的页面。 90％的HTML都重复了，所以我试图找出如何清除它。

在页面上我有几个问题，所有这些问题都有相同的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>

这是一个问题所需的html。每个问题的结构都是一样的，但显然文字是不同的。

使用jQuery减少html代码的最佳方法是什么？

Answer 1

在某些情况下，使用客户端模板（也称为JavaScript模板）可能是避免重复HTML的好方法。

基本上，您可以编写一个HTML“模板”并将其应用于您想要的任意数量的对象。

但是，由于HTML会在页面加载时生成，我很确定搜索引擎永远不会看到它。如果我错了，也许有人可以纠正我？

无论如何，如果你认为这可能是你正在寻找的东西，那里有很多JS模板库。我个人使用John Resig的极轻量级解决方案的略微修改版本：http://ejohn.org/blog/javascript-micro-templating/

干杯

使用jQuery使用DRY清理HTML

1 个答案: