2011-12-16 5 views
15

Tengo un bloque de código PHP que tiene este aspecto:clase diferente a la par y divs impares

$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" width="300" 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; 
} 

Quiero que el <div> para incluir una clase diferente en función de si es par o impar. Si es par, obtiene la clase X; si es impar, obtiene la clase Y.

¿Cómo hago esto en mi caso? ¡No tengo ni idea y no sé cómo comenzar!

Respuesta

42

Inicialice una variable $count=0; antes del ciclo. Luego, coloque lo siguiente en el ciclo: ++$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") . '">'; 
11
[...] 
$i++; 
echo '<div class="'.($i%2 ? 'odd':'even').'>'; 
[...] 
1

Si está utilizando un navegador moderno, puede utilizar CSS con algo como esto en su hoja de estilo.

div:nth-child(odd) 
{ 
    background:#ff0000; 
} 
div:nth-child(even) 
{ 
    background:#0000ff; 
} 
+0

+1 por educarme sobre una nueva característica. :) –

+0

Tal como se publicó en mi respuesta, tenga cuidado, tenga en cuenta la compatibilidad limitada del navegador de este selector de CSS3. – Wex

5

antes del foreach, declarar un valor lógico:

$div_flag = false; 

en el foreach, donde se hacen eco de la div añadir lo siguiente:

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

al final del foreach (o en cualquier lugar en ella, en realidad) añadir lo siguiente:

$div_flag = !$div_flag; 
0

Pruebe algo como esto

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

Agregue una variable para su ciclo.

$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" width="300" 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; 
} 
4

Si está trabajando en un prototipo de sitio, siempre se puede implementar una solución CSS puro:

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

La razón por la que recomiendo que sólo utilice esto para sitios prototipo se debe a la compatibilidad de :nth-childdoes not support IE8 or below.

+1

+1 Sé que el soporte del navegador no es ideal, pero CSS> el lado del servidor para la lógica de visualización – rdlowrey

0

Sin contadores:

<?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;?> 
Cuestiones relacionadas