Question

<div class="zoom_img">

<a href="1.jpg"><img alt="1.jpg" src="1.jpg"></a>
<a href="2.jpg"><img alt="2.jpg" src="2.jpg"></a>
<a href="3.jpg"><img alt="3.jpg" src="3.jpg"></a>
<a href="4.jpg"><img alt="4.jpg" src="4.jpg"></a>
<a href="5.jpg"><img alt="5.jpg" src="5.jpg"></a>

</div>

我必须按此顺序添加近100张照片。所以只是想知道如何使用for循环轻松完成工作：）

Answer 1

你需要某种服务器语言。例如在php。

<?php
      $numOfPhotos = 10; //some value.
      $html = "<div class='zoom_img'>";
      for ($i = 0; $i < $numOfPhotos; $i++) 
      {
          $html = $html . "<a href='" . $i . "jpg'><img alt='" . $i . "jpg'></a>";
      }
          $html = $html . "</div>";

?>
<html>

    <body>
         <!-- Put your normal html -->
         <?php echo $html; ?> <!-- this will insert the html created dynamically -->
    </body>
</html>

Answer 2

如果您没有服务器语言，只想简单地预生成：打开终端，启动python（输入'python'）并输入：

for x in range (0, 100):
    print '<a href=%d.jpg"><img alt="%d.jpg" src="%d.jpg"></a>' %(x, x, x)

用您要去的任何数字替换100。它会打印出代码。

编辑：添加前胡萝卜打印

Answer 3

在客户端使用JQuery

var img;
for (var i = 1; i < 10; i++){
    img =  '<a href="' + i +'.jpg"><img alt="' + i + '.jpg" src="' + i + '.jpg"></a>';
    $(".zoom_img" ).add( img);
}

重复一系列代码

3 个答案: