0

好的，我已经让 PHP 成功打开并读取包含许多图像的目录的内容。我将所有这些数据传递到一个数组中，对结果进行排序，最后遍历所有图像，以便它给我一个刺痛感，然后我将其回显到 html 页面上。在这个字符串中，我为每个 div 设置了 css 类，以便在页面呈现每个 div 时正确显示。

我的问题是与实际 PHP 设置每个 div 的类有关。基本上我有两个类，我根据它们的数量应用于每个 div。例如在第一个水平行中，第 1 到第 3 个 div 获取到的类，.box以便设置 amargin-right:10px;和第 4 个获取它自己的类，.box last其中设置margin-right:0px;。

所以我想问的是，有没有办法编写一些逻辑来告诉 PHP 代码为第 1 到第 3 个 div 应用一个类，为每行的每 4 个 div 应用一个单独的类？有效地，行中的前三个 div 得到在课堂上，每行的第四个 div 得到另一个？ 

<?php 
$dir = "images/"; 

$images = array();

$returnstr = "";

if ($handle = opendir($dir)) {
    while ( false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != ".."){
            $images[] = $entry;
        }
    }
    closedir($handle);
}

natsort($images);

$newArray = array_values($images);

foreach ($newArray as $key => $value) {
    $returnstr .= '<li class="box">';
    $returnstr .= '<a href="#" name="" class="thumb" id="' . $key . '"><img src="'. $dir . '/' . $value . '"/></a>';
    $returnstr .= '</li>';
}

?>

这是第 1 - 3 个 div 的 CSS ......

.box {

float: left;
/*margin-right:10.5px;*/
margin-right:10px;
/*width: 92px;
height: 92px; */
width: 232.5px;
height:150px;
/*height: 232px; */
/*background-color: #999;
border: 1px solid*/
margin-bottom: 10px;  
list-style: none;  
}

...以及网格中每 4 个 div 的 CSS

.box.last {
margin-right: 0px;
}

这是我试图实现的 html。

<li class="box">
  <a href="#" name="cap1" class="thumb" id=""><img src="images/1.jpg"/></a>
</li>

<li class="box">
  <a href="#" name="cap2" class="thumb" id=""><img src="images/2.jpg"/></a>
</li>

<li class="box">
  <a href="#" name="cap3" class="thumb" id=""><img src="images/3.jpg"/></a>
</li>

<li class="box last">
  <a href="#" name="cap4" class="thumb" id=""><img src="images/4.jpg"/></a>
</li>
4

6 回答 6

1

.last您可以使用 css 选择器为第四个<li>元素提供特殊边距，而不是使用 php 添加类，如下所示：

li.box:nth-child(4){
    margin-right: 0px;
}

这将适用于<li>其父容器的第四个孩子

于 2012-11-29T22:11:53.633 回答
0

您需要使用模数，例如：

foreach ($newArray as $key => $value) {
    $returnstr .= '<li class="box';
    if (($key > 0) && (($key % 4) == 0)) {
        $returnstr .= ' last';
    }
    $returnstr .= '">';
    $returnstr .= '<a href="#" name="" class="thumb" id="' . $key . '"><img src="'. $dir . '/' . $value . '"/></a>';
    $returnstr .= '</li>';
}
于 2012-11-29T22:10:05.283 回答
0

这可以通过将foreach循环更改为：

$i = 1;
foreach ($newArray as $key => $value) {
  $last_class = ($i == 4) ? ' last' : '' ;
  $returnstr .= '<li class="box' . $last_class . '">';
  $returnstr .= '<a href="#" name="" class="thumb" id="' . $key . '"><img src="'. $dir . '/' . $value . '"/></a>';
  $returnstr .= '</li>';
  $i++;
}

这样，无论是什么$key（在关联数组的情况下），您仍然只将其应用于第四项。

于 2012-11-29T22:10:30.950 回答
0 
foreach( $newArray as $key => $value ) {
    if( $key % 4 == 0 ) {
        $returnstr .= '<li class="box last">';
    } else {
        $returnstr .= '<li class="box">';
    }
}

试试看。

于 2012-11-29T22:10:35.250 回答
0

这可能很脏，但您可以简单地使用计数器，如下所示：

 $counter = 1;
foreach ($newArray as $key => $value) {
    if ($counter==4) {
        $returnstr .= '<li class="last">';
    }
    else
    {
        $returnstr .= '<li class="box">';
    }
    $returnstr .= '<a href="#" name="" class="thumb" id="' . $key . '"><img src="'. $dir . '/' . $value . '"/></a>';
    $returnstr .= '</li>';

    $counter++;
}

它应该可以解决问题。

于 2012-11-29T22:11:38.783 回答
0

您可以使用模运算符 %以及每次通过循环递增的整数来执行此操作。简单的例子：

<?php

$n = 0;
foreach ($newArray as $key => $value) {
    $n++;
    if($n > 0 && ($n % 4) === 0){
        $everyFourthRowCss = " last";
    } else {
        $everyFourthRowCss = "";
    }
    $returnstr .= "<li class='box{$everyFourthRowCss}'>";
    $returnstr .= '<a href="#" name="" class="thumb" id="' . $key . '"><img src="'. $dir . '/' . $value . '"/></a>';
    $returnstr .= '</li>';
}
于 2012-11-29T22:13:06.070 回答