0

わかりました。PHPを使用して、多数の画像を含むディレクトリの内容を正常に開いて読み取ることができます。このすべてのデータを配列に渡し、結果を並べ替え、最後にすべての画像を反復処理して、HTMLページにエコーするスティングを取得します。この文字列では、ページがレンダリングされるときに各divが正しく表示されるように、各divにcssクラスを設定します。

私の質問は、実際のP​​HPが各divのクラスを設定することです。基本的に、私は2つのクラスを持っており、それらの数に応じて各divに適用します。たとえば、最初の横の行では、1番目から3番目のdivは.boxaを設定するようにのクラスを取得margin-right:10px;し、4番目のdivはそれ自体のクラス.box lastを設定しますmargin-right:0px;。

だから私が聞きたかったのは、PHPコードに1番目から3番目のdivに1つのクラスを適用し、各行の4番目のdivごとに個別のクラスを適用するように指示するロジックを書く方法がありますか？事実上、行の最初の3つのdivはクラスで、各行の4番目の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

php でクラスを追加する代わりに、css セレクターを使用して、次のように 4 番目の要素.lastに特別なマージンを与えることができます。<li>

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

<li>親コンテナの4番目の子であるすべてに適用されます

于 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(連想配列の場合) 何であれ、これを 4 番目の項目にのみ適用します。

于 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 に答える