向 PHP foreach 循环中的项目添加唯一类答案

【问题标题】：Adding a unique class to items in a PHP foreach loop向 PHP foreach 循环中的项目添加唯一类
【发布时间】：2018-02-05 14:35:56
【问题描述】：

我在一个名为 img 的文件夹中有一堆图像，我正在尝试执行一个 foreach 循环来循环它们并将它们输出到屏幕上，然后为每个图像添加一个唯一的类。

这是我目前所拥有的，但它说 $i 未定义，所以我不确定我是否走在正确的轨道上。我对此很陌生。

   $dir = "img/gallery/*.jpg";
   $classes = array('promotional', 'beaches', 'volunteers');
   $images = glob( $dir );

   foreach ( $images as $image ):
   $class = $classes[$i++ % 3];
   echo '
      <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '">
          <div class="portfolio-item">
              <div class="shot-item">
                  <a class="overlay lightbox" href="' . $image . '">;
                      <img src="' . $image . '" />;
                      <i class="lnr lnr-plus-circle item-icon"></i>
                  </a>
              </div>
          </div>
      </div>
   ';
   endforeach;

感谢您的帮助！

【问题讨论】：

$i = 0; 循环前

标签： php class foreach unique

【解决方案1】：

我会像这样修改foreach：

$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
$i = 0;

foreach ( $images as $x => $image ):
$class = $classes[$i++ % 6];
echo '
   <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '-' . $x . '">
       <div class="portfolio-item">
           <div class="shot-item">
               <a class="overlay lightbox" href="' . $image . '">;
                   <img src="' . $image . '" />;
                   <i class="lnr lnr-plus-circle item-icon"></i>
               </a>
           </div>
       </div>
   </div>
';
endforeach;

【讨论】：

非常感谢。收拾好！
@AlexKenny 添加了 splash58 的评论，因此您不会收到未定义的错误消息。
谢谢。我还注意到我在数组中只放了 % 6 和 3 个项目！
有什么方法可以定义哪些图像得到哪个类？
我不确定我是否遵循，你能举个例子吗？

【解决方案2】：

我认为最好的方法是使用两个类而不是一个唯一的。

第一类将用于检测项目/内容类型，第二个将是唯一的，以唯一标识。

通过这样做，您可以更好地控制内容。

这里稍作修改。

$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );

foreach ( $images as $index => $image ):
$class = $classes[$i++ % 6];
echo "
  <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix my-list-item-{$class} image-id-{$index}">
      <div class="portfolio-item">
          <div class="shot-item">
              <a class="overlay lightbox" href="' . $image . '">;
                  <img src="' . $image . '" />;
                  <i class="lnr lnr-plus-circle item-icon"></i>
              </a>
          </div>
      </div>
  </div>
";
endforeach;

什么变化：

将单引号(') 更改为双引号(") 以便能够解析字符串中的变量，例如 {$class} 或简单地像 $class
添加了识别项目类型的类，my-list-item-{$class} ：将产生这样的 my-list-item-promotional
添加了标识为唯一项目的类 image-id-{$index} ：将产生像这样的 image-id-5

在css或js中使用

CSS：

.my-list-item-promotional{background: green;}
.my-list-item-promotional.image-id-2{background: yellow;}

这将提供除项目编号 2 之外的所有促销类型内容背景为绿色

你可以像 CSS 一样使用 jQuery 来选择元素。

谢谢。

【讨论】：

【解决方案3】：

你不需要定义自己的$i；它已经作为$images 数组的索引存在。

在您执行$images = glob( $dir ); 之后，$images 将是一个数字索引数组。所以不要像这样显式增加一个计数器变量：

foreach ( $images as $image ):
    $class = $classes[$i++ % 3];

您可以像这样使用数组中的索引：

foreach ( $images as $i => image ):
    $class = $classes[$i % 3];

【讨论】：