Question

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

在我的情况下，我想在每个发布的新消息中切换名为MessagePicture和MessageText的div的位置。

左图，右图
右图，文字左侧
左图，右图
等。

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

任何人都可以告诉我应该改变什么来让它发挥作用吗？

    <?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

您的$i始终保持0。在while循环中添加$i++以增加它。

您可以在一行中执行此操作：

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

完整示例：

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

Answer 2

这可能不是您确切问题的答案，但由于任何标记已经包含哪些子元素行是偶数以及哪些是奇数的信息，并且因为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

偶数/奇数确定CSS类

2 个答案: