Question

我在一个名为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;

感谢您的帮助！

Answer 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;

Answer 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}：会产生如下图像-id-5

在css或js中使用

<强> CSS：

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

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

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

谢谢。

Answer 3

您无需定义自己的$i;它已作为$images数组的索引存在。

执行$images = glob( $dir );后，$images将成为数字索引数组。因此，而不是像这样显式递增计数器变量：

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

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

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

为PHP foreach循环中的项添加唯一类

3 个答案:

在css或js中使用