缩短 div 代码

Question

我这里有一个看起来不错的项目，并且完全符合我想要它的作用。代码笔在这里。我需要找出的是这些翻转的div 是否：

<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper')">&#xf112;</span>
        </div>
    </div>
</div>
<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper2">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf112;</span>
        </div>
    </div>
</div>
<div class="flip-container" id="flipcontainer">
    <div class="flipper" id="flipper3">
        <div class="front" id="front">
            <img src="example.jpg"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper3')">&#xf112;</span>
        </div>
    </div>
</div>

可以以任何方式缩短。它看起来笨重且过于"蛮力方法"。解决方案最好是HTML格式，但JS不会成为问题。谢谢。

Answer 1

任何轻量级的JS模板引擎都可以为您的用例服务。有关示例，请查看此参考：

https://www.sitepoint.com/overview-javascript-templating-engines/

基本上，您所做的是声明一次模板，并通过在模板实例上插值来应用 Javascript 变量。
此类模板的示例：

<div class="flip-container" id="{{ id }}">
    <div class="flipper" id="flipper2">
        <div class="front" id="front">
            <img src="{{ img }}"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf013;</span>
        </div>
        <div class="back" id="back">
            <img src="settings-512.png" class="settings"><br class="spacer" />
            <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper('flipper2')">&#xf112;</span>
        </div>
    </div>
</div>