向偶数和奇数 div 添加不同的类

Posted 2023-02-24

【中文标题】向偶数和奇数 div 添加不同的类

【英文标题】：Add different class to even and odd divs

【发布时间】：2012-01-22 07:58:47

【问题描述】：

我有一段如下所示的 php 代码：

$flag = false;
if (empty($links))

    echo '<h1>You have no uploaded images</h1><br />';


foreach ($links as $link)
   
    $extension  = substr($link, -3);
    $image_name = ($extension == 'peg') ? substr($link, -15) : substr($link, -14);  

    ($delete_submit) ? deleteImage('.' . $image_name, $link) : '';

    echo '<div>';
        echo '<table>';

        echo '<tr><td class="fullwidth"><a class="preview_img" href="' . $link . '"><img src="' . $link . '" title="Click to enlarge"  class="thumb" /></a></td></tr>';

        echo '<tr><td><span class="default">Direct:</span>&nbsp;';
        echo '<input type="text" readonly="readonly" class="link-area" onmouseover="this.select();" value="' . $link . '" />'; 
        echo '</td></tr>';

        echo ($flag) ? '<hr /><br>' : '';

        echo '</table>';
        echo '<br>';
    echo '</div>';

    $flag = true;

我希望<div> 包含基于它是偶数还是奇数的不同类。如果是偶数，则为 X 类，如果为奇数，则为 Y 类。

在我的情况下，我该怎么做？我完全一无所知，我不知道如何开始！

【参考方案1】：

在循环之前初始化一个变量$count=0;。然后将以下内容放入循环中：++$count%2?"odd":"even"。

$count = 0;
foreach ($links as $link)
   
    $extension  = substr($link, -3);
    $image_name = ($extension == 'peg') ? substr($link, -15) : substr($link, -14);  

    ($delete_submit) ? deleteImage('.' . $image_name, $link) : '';

    echo '<div class="' . (++$count%2 ? "odd" : "even") . '">';

【参考方案2】：

[...]
$i++;
echo '<div class="'.($i%2 ? 'odd':'even').'>';
[...]

【参考方案3】：

在 foreach 之前，声明一个布尔值：

$div_flag = false;

在 foreach 中，您在其中回显 div 添加以下内容：

"class=".( $div_flag ? "'odd'" : "'even'" )

在 foreach 的末尾（或其中的任何地方，真的）添加：

$div_flag = !$div_flag;

【参考方案4】：

如果您正在开发一个原型网站，您总是可以实现一个纯 CSS 解决方案：

div:nth-child(even)  /* Apply even class rules here */ 
div:nth-child(odd)  /* Apply odd class rules here */ 

我建议您仅将其用于原型网站的原因是因为与 :nth-child does not support IE8 or below 的兼容性。

【讨论】：

+1 我知道浏览器支持不是很理想，但是 CSS > 服务器端的显示逻辑

【参考方案5】：

如果您使用的是现代浏览器，则可以在样式表中使用带有类似内容的 CSS。

div:nth-child(odd)

  background:#ff0000;

div:nth-child(even)

  background:#0000ff;

【讨论】：

正如我在回答中所发布的，请注意此 CSS3 选择器的有限浏览器兼容性。

【参考方案6】：

为你的循环添加一个变量。

$c = true;
foreach ($links as $link)


$extension  = substr($link, -3);
$image_name = ($extension == 'peg') ? substr($link, -15) : substr($link, -14);  

($delete_submit) ? deleteImage('.' . $image_name, $link) : '';

echo '<div'.(($c = !$c)?' class="odd"':'').">
//echo '<div>';
    echo '<table>';

    echo '<tr><td class="fullwidth"><a class="preview_img" href="' . $link . '"><img src="' . $link . '" title="Click to enlarge"  class="thumb" /></a></td></tr>';

    echo '<tr><td><span class="default">Direct:</span>&nbsp;';
    echo '<input type="text" readonly="readonly" class="link-area" onmouseover="this.select();" value="' . $link . '" />'; 
    echo '</td></tr>';

    echo ($flag) ? '<hr /><br>' : '';

    echo '</table>';
    echo '<br>';
echo '</div>';

$flag = true;

【参考方案7】：

试试这样的

$count = 0;
foreach($links as link) 
  $count++;
  print ($count % 2 == 1) ? "odd" : "even"; 

【参考方案8】：

没有计数器：

<?php $toggle_class = 'even';?>
<?php foreach ($links as $link):?>
  <?php $toggle_class = ($toggle_class == 'odd' ? 'even' : 'odd');?>
  <div class="<?php echo $toggle_class;?>">
    Your div content...
  </div>
<?php endforeach;?>

【参考方案9】：

这是简单的技巧

function check_odd_even($data)
    if($data % 2 == 0)
        $data = "Even";
    
    else
        $data = "Odd";
    
    return $data;

if (check_odd_even($index) == 'Odd')
//layout 1....
else
//layout 2....