Question

我正在尝试自动化一组中的100个图标。我有一个320px x 320px的图像精灵，包含100个图标，每个32px x 32px。我想要实现的是有一个php循环，我可以重现图标div代码100次，但在该循环中，使用其他循环来定位图像精灵的背景。我需要做的是，增加x坐标32 px，前10个为0到-288，y坐标为0.然后从0到-288再次重复x代码，但增加y坐标32px ，等等。因此，对于每10行图标，x每次增加32px然后重置为0，y坐标每10个图标增加一次，直到达到总共100个图标。我有以下代码成功循环100图标总数，但无法使嵌套循环工作。希望这是有道理的。任何帮助将不胜感激。

<?php
   for ($i=1; $i<=100; $i++) { ?>
   <div id="menu_icon_edit_cont">
      <div class="menu_icons" style="background-position: -<?= (x coordinate here) ?>px -<?= (y coordinate here) ?>px">
      </div>
   </div>
<? } ?>

Answer 1

您可以轻松地将单个迭代器$i“转换”为坐标：$y = floor($i/10); $x = $i%10;。然后它就是一个乘以图像宽度的情况（在这种情况下为32）并且你已经完成了。

Answer 2

有很多方法可以做到这一点，你选择的应该是你最容易阅读和维护的内容。

新手经常犯的错误是假设他们的for循环需要完全模仿他们想要做什么（你想要100个图标，所以你假设你应该从1到100迭代）。

您真正想要的是最终产品，例如：

    for ($y = 0; $y < 320; $y += 32) {
        for ($x = 0; $x > -320; $x -= 32) {
            //output your html using $x/$y
        }
    }

走你发布的路线虽然看起来像：

    for($i=0;$i<100;$i++){

        $x = $i%10 * -32;
        $y = floor($i/10)*32;

        //output your html using $x/$y
    }

我更喜欢第一种方式，因为它更准确地说明了它的目的。

PHP嵌套for循环到位置图标精灵

2 个答案: