如何在循環中在php中添加一個類？

Question

我嘗試在1循環后添加2個bootstrap類col-md-8 ，然后在php循環中添加2個col-md-4類。 這個過程在完整循環時應該是相同的。 所以結果看起來像這樣：

我目前的代碼是吼叫，但它沒有顯示我需要的結果，無法知道循環將如何！

完整代碼：

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">
    <?php $get_menu_class=m ysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC"); $x=0; while($menu_class_result=m ysqli_fetch_array($get_menu_class) ) { $menu_class_name=h tmlspecialchars($menu_class_result[ 'pcat_name']); $menu_class_image=h tmlspecialchars($menu_class_result[ 'pcat_image']); if($x & 1) { $col='8' ; }else { $col='4' ; } ?>
    <div class="col-sm-<?php echo $col; ?>">
        <div class="we-offer">
            <a href="area">
                        <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                        <h3><?php echo ucfirst($menu_class_name); ?></h3>
                    </a>
        </div>
    </div>
    <?php $x++; } ?>

</div>

最新代碼：

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">
    <?php $get_menu_class=m ysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC"); $x=0; while($menu_class_result=m ysqli_fetch_array($get_menu_class) ) { $menu_class_name=h tmlspecialchars($menu_class_result[ 'pcat_name']); $menu_class_image=h tmlspecialchars($menu_class_result[ 'pcat_image']); $col=( (($x+1)/2)%2)? "8": "4"; ?>
    <div class="col-sm-<?php echo $col; ?>">
        <div class="we-offer">
            <a href="area">
                <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                <h3><?php echo ucfirst($menu_class_name); ?></h3>
            </a>
        </div>
    </div>
    <?php $x++; } ?>

</div>

目前的結果：

[！[在此處輸入圖片說明] [2]] [2]

Answer 1

請嘗試這個邏輯： $col = ((($i+1)/2)%2)?"8":"4";

https://3v4l.org/GHGVp

如您所見，它會輸出所需的結果。

The col for loop 0 is col4
The col for loop 1 is col8
The col for loop 2 is col8
The col for loop 3 is col4
The col for loop 4 is col4
The col for loop 5 is col8
The col for loop 6 is col8
The col for loop 7 is col4
The col for loop 8 is col4
The col for loop 9 is col8
The col for loop 10 is col8
The col for loop 11 is col4
The col for loop 12 is col4
The col for loop 13 is col8
The col for loop 14 is col8
The col for loop 15 is col4
The col for loop 16 is col4
The col for loop 17 is col8
The col for loop 18 is col8
The col for loop 19 is col4

您只需要在代碼中替換

if($x & 1) {
    $col = '8';
}else {
    $col = '4';
}

同

$col = ((($x+1)/2)%2)?"8":"4";

Answer 2

我只是跟蹤顯示的變量。 如果您首先將其定義為1，那么您將只顯示第一次所需的第一列，然后它將切換到另一列。

您不需要跟蹤$x 。 我不會稱這是一個簡單的數學問題，而這里的另一個OK答案不適合您的用例。

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">

    <?php
        $get_menu_class = mysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC");
        $col = 4;
        $displayed = 1;

        while($menu_class_result = mysqli_fetch_array($get_menu_class) ) {
            $menu_class_name = htmlspecialchars($menu_class_result['pcat_name']);
            $menu_class_image = htmlspecialchars($menu_class_result['pcat_image']);
    ?>
            <div class="col-sm-<?php echo $col; ?>">
                <div class="we-offer">
                    <a href="area">
                        <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                        <h3><?php echo ucfirst($menu_class_name); ?></h3>
                    </a>
                </div>
            </div>
    <?php
            if($displayed){
                switch($col){
                    case 4:
                        $col = 8;
                        break;
                    case 8:
                        $col = 4;
                        break;
                    default:
                        $col = 4;
                }

                $displayed = 0;
            } else {
                $displayed = 1;
            }
        }
    ?>

</div>