2011-12-16 8 views
15

Ho un blocco di codice PHP che assomiglia a questo:Aggiungi classe diversa a pari e dispari div

$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; 
} 

Voglio il <div> per includere una classe diversa in base a se è pari o dispari. Se è pari, ottiene la classe X, se è dispari ottiene la classe Y.

Come faccio a fare questo nel mio caso? Sono totalmente all'oscuro e non so come iniziare!

risposta

42

Inizializzare una variabile $count=0; prima del ciclo. Quindi inserire il seguente nel 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

Se si utilizza un browser moderno, è possibile utilizzare i CSS con qualcosa di simile nel foglio di stile.

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

+1 per me educare su una nuova funzione. :) –

+0

Come postato nella mia risposta, fai attenzione a tenere presente la compatibilità limitata del browser con questo selettore CSS3. – Wex

5

prima del foreach, dichiarare un valore booleano:

$div_flag = false; 

nel foreach, dove eco il div aggiungere questo:

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

alla fine del foreach (o in qualsiasi in esso, davvero) aggiungere questo:

$div_flag = !$div_flag; 
0

provare qualcosa di simile

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

Aggiungere una variabile per il 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

Se stai lavorando su un sito di prototipo, si può sempre implementare una soluzione CSS puro:

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

Il motivo vi consiglio di utilizzare solo questo per i siti prototipo è perché la compatibilità per :nth-childdoes not support IE8 or below.

+1

+1 So che il supporto del browser non è ideale, ma CSS> lato server per la logica di visualizzazione – rdlowrey

0

Senza contatori:

<?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;?> 
Problemi correlati