基本示例

Question

我一直致力于制作一系列大约100张或更多的卡片，这些卡片看起来像索引卡片。为了获得每张卡的蓝色水平线的外观，我为每张卡设置了大约20个重复相同DIV的块。由于每张卡的代码相同，有没有办法用函数调用代码而不是一遍又一遍地重复它？我很擅长编码。

我对如何改进这种方法有任何建议。

 <p> <li id="10" class="hideable"><div     class="tile flipX">
    <div class="front"><div id="paper">

<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="margin"></div>  



<div id="content">
<p class="TOF"> </p>
    </div></div></div>

<div class="back"><div id="paper">

<p>
</p>

     </div></div></li>

Answer 1

你可以做这样的事情

<div id="paper"></div>

<script>
for (i = 0; i < 20; i++) { 
    var para = document.createElement("div");
    var node = document.createTextNode(".");
    para.appendChild(node);
    var element = document.getElementById("paper");
    element.appendChild(para);
}
</script>

codepen

或者你可以试试这个

<div id="paper"></div>
<script>
  var tag = "<div class='line'>1<div class='blueline'></div></div>";
  var el = document.getElementById("paper");
  for (i = 0; i < 20; i++) { 
    el.innerHTML += tag;
  }
</script>

请进一步研究，我想我看到innerHTML与安全漏洞相关的某个地方。

Answer 2

你能做到这一点的唯一方法就是你要使用PHP或ASP（或者下面的评论中指出的Javascript）。这是一个如何实现使用PHP后的结果的示例：

基本示例

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <?php
            for($i=0;$i<10;$i++){
                echo '<div class="line">.<div class="blueline"></div></div>';
            }
        ?>
    </body>
</html>

这将产生以下结果：

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
        <div class="line">.<div class="blueline"></div></div>
    </body>
</html>

由于for($i=0;$i<10;$i++)循环，你可以看到你想要的div重复10次。

进一步的例子

你可以用PHP / ASP做一些“聪明”的事情，如下所示：

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <?php
            for($i=0;$i<2;$i++){
                echo '<div class="line">' . $i . '<div class="blueline"></div></div>';
            }
        ?>
    </body>
</html>

这有效地在循环的每次迭代中输出计数器（$i）值。这将由浏览器呈现为：

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <div class="line">0<div class="blueline"></div></div>
        <div class="line">1<div class="blueline"></div></div>
        <div class="line">2<div class="blueline"></div></div>
    </body>
</html>

您可以使用它来设置样式，ID，名称，数据或任何您喜欢的内容。

注意

我没有包含Javascript的示例，因为如果您的用户在关闭Javascript的情况下浏览您的网站（这并不像您想象的那么罕见），它可能会破坏您网站的功能。此外，PHP / ASP有几个优点，例如将数据库集成到您的网站并将其与Facebook和其他服务连接。

有没有更简单的方法来处理重复DIV？

2 个答案:

基本示例

进一步的例子

注意