Question

我有一个包含3行div的表，然后是另一行或3个div然后是另一行然后是另一行。

但我想要实现的是突出每一行。每行包含3个div。

因此第一行将为.mydiv .even，然后.even将为灰色。然后下一行将是.mydiv .odd，然后.odd将为白色。

我正在使用css-tricks.com ($xyz++%2)中的代码将每个其他div设为不同的类。

所有帮助都是相关的。

这是我的代码

$get_new_games = mysql_query("SELECT game_title,game_description,id from games ORDER BY added_date LIMIT 10");
while ($row = mysql_fetch_array($get_new_games)) {
$new_game_title = $row['game_title'];
$new_game_description = $row['game_description'];
$new_game_id = $row['id'];
$new_games_display .= '<div class = "game_module class-'.($xyz++%2).'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}

Answer 1

将类添加到行，在PHP中输出表行更合理，使用类似这样的内容：

<?php for ($i = 0; $rows[$i]; $i ++): ?>
<tr class="<?php echo $i % 2 ? 'odd' : 'even'; ?>">
  <td>
    <div />
  </td>
  <td>
    <div />
  </td>
  <td>
    <div />
  </td>
</tr>
<?php endfor; ?>

模运算符%将返回除法的余数，在这种情况下，除法为2，任何相等的数字将给出余数为零，任何不等数将给出余数为1。 / p>

div的选择器将是：

tr.odd td > div
tr.even td > div

这将确保只选择每行中的顶部div。

<强>更新

从您提供的代码中看起来并没有真正显示您正在使用表格（也许您的意思是比实际的HTML元素更松散？）。根据您的代码，您已经按照上述方式使用模数，但您需要更改以下内容。

$xyz = 0;
$get_new_games = mysql_query("SELECT game_title,game_description,id from games ORDER BY added_date LIMIT 10");
while ($row = mysql_fetch_array($get_new_games)) {
  $new_game_title = $row['game_title'];
  $new_game_description = $row['game_description'];
  $new_game_id = $row['id'];
  $new_games_display .= '<div class = "game_module class-'.($xyz++%2 ? 'odd' : 'even').'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}

我添加了第一行来将变量初始化为零，并将$new_games_display - 行更改为($xyz++%2 ? 'odd' : 'even')。这将确保每个其他div都有类class-odd，其余class-even。

我遇到的唯一问题是你提供的代码并不真正对应你的初始问题，行有三个div s，也许我错过了什么 - 随意提供更多代码，我将能够为您提供更多帮助。

Answer 2

循环并打印出行时，您将使用索引来确定偶数或奇数。

if(!$index%2){
   echo "even";
}
else{
   echo "odd";
}

％是模数运算符，它在分割操作数时返回余数。

编辑：所以在你的情况下，你的最后一行是

$new_games_display .= '<div class = "game_module class-'.(($xyz++%2) ? 'odd' : 'even').'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';

Answer 3

尝试这样的事情：

$i = 0;
while ($row = mysql_fetch_array($get_new_games)) 
{
...
$i++;
$class = ($i%2)? "even" : "odd"; 
$new_games_display .= '<div class = "game_module class-' . $class .'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}

而不是检查$i%2 ==0，您可以使用类似

的内容

 $class = ($i & 1) ? "odd" : "even";

或

if($i & 1){
    $class = "odd";
}else{
    $class = "even";
}

Answer 4

您的代码仅突出显示每隔一行而不是三行组。您可以使用:nth-child css选择器，但使用php将确保浏览器兼容性，因为类是硬编码的。反正..

$evenodd = false; // false indicates odd
$count = 0;

while (...) {
   ... //display
   $count++;
   if ($count == 2) {
      $evenodd = !$evenodd;
      $count = 0;
   }
}

php给3个div的课程然后跳过3

4 个答案: