php - 偶数/奇数确定 CSS 类

Question

我已经阅读了很多关于确定偶数/奇数并使用它来更改 div 的类的信息。

就我而言，我想在每条发布的新消息中切换名为 MessagePicture 和 MessageText 的 div 的位置。

1. 图片左，文字右
2. 图片右，文字左
3. 图片左，文字右
4. 等等。

这是我用来显示消息的代码，我还尝试了让偶数/奇数代码工作的尝试之一。

谁能告诉我我应该改变什么才能让它工作？

    <?PHP

    $Query =
    "
            SELECT
                ID,
                NameBox,
            MessageBox,
            Code
        FROM
            messages
            ORDER BY
                ID
            DESC LIMIT 10
    ";

    $Result = mysql_query($Query);

        if(!$Result)
            {
            echo 'ERROR: '.mysql_error();
            }

        else
            {
            if(mysql_num_rows($Result) == 0)
                {
                    echo 'No results';
                }

                else
                    {
                    $i = 0;
                $class = (++$i % 2) ? 'even' : 'odd';
                    while
                    ($Row = mysql_fetch_assoc($Result))

                        echo '

<div id="MessageWrapper">
    <div id="MessagePicture" class="'.$class.'">                                                                                
        <style>                                             
        #MessagePicture { 
        background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);  
        background-repeat: no-repeat; 
        background-position: center
        </style>
        </div>

    <div id="MessageText" class="'.$class.'">

        <div id="MessageTitle">

            <h1>'.$Row['NameBox'].'</h1>

        </div>

        <div id="MessageContent">                                                   
            <p>'.nl2br($Row['MessageBox']).'</p>
        </div>

    </div>

</div>  

';}}}?>

Answer 1

这可能不是您确切问题的答案，但由于任何标记已经包含有关哪些子元素行是偶数行和哪些奇数行的信息，并且由于 CSS 能够区分这些，您可以使用纯 CSS 来实现这一点，是我在这里大胆提供的。

使用 CSS 选择器:nth-child(even)和:nth-child(odd)分别选择偶数和奇数子代。这样您也不必更改或标记您的标记。一个例子：

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
    <li>Pears</li>
    <li>Pineapples</li>
</ul>

li:nth-child(even)
{
    background-color: silver;
}

li:nth-child(odd) /* or leave this one out altogether */
{
    background-color: white;
}

检查以下相当权威的页面以获取更多详细信息和用法（如nth-child(5n+3)）：

http://www.w3.org/Style/Examples/007/evenodd.en.html

Answer 2

你$i永远停留0。添加$i++while循环以增加它。

您可以在一行中做到这一点：

$class = ($i++ % 2 == 0) ? 'even' : 'odd';

完整示例：

$i = 0;
while ($Row = mysql_fetch_assoc($Result)) {
  $class = ($i++ % 2 == 0) ? 'even' : 'odd';
  //echo ...
}