Question

我有一个项目here，它看起来非常好，完全符合我的要求。 codepen是here。我需要知道的是，如果这些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>

可以任何方式缩短。它看起来很笨重，而且“蛮力方法”＃34;。解决方案最好是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>

缩短Div代码

1 个答案: