Sam naslijedila web dio od klijenta stare dobavljača i ima problema veličini slike. Slike trebaju biti 60×50 ali iz nekog razloga ak, izvorni dobavljač ih je natjerao u 42×42, tako da izgledaju squashed:
Dobra slika |
Bad Slika |
Evo označavanje (nešto pojednostavljeno):
<table Class = 'proširenog izgledi'>
<thead>
<tr>
<th width = '100′>3 Utorak</th>
</tr>
</thead><tbody>
<tr class = 'prognoza'>
<td width = '100′>
<Ulica>
<li class = "high">Visok: 72&vi;F</Li>
<li class = 'niska'>Nisko: 44&vi;F</Li>
<Li Class = 'stanje'>Sunčan
<img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ height = '42’ alt =” />
</Li>
</Ulica>
</td>
</tr></tbody>
</stol>
Ćete primijetiti da, iako Put do same slike pokazuje pravilnu dimenziju (60×50) izvorni dobavljač je prisiljen u 42×42. Zašto? Lud.
U svakom slučaju, Htjela sam brzo i jednostavno rješenje za ovaj problem i okrenuo sam se jQuery. Trik je pronaći sve potrebno <img> oznake. Nisam želio da Ljenčariti s bilo kojim drugim IMG tagova (od kojih su mnogi). Ovo malo jQuery je trik:
<skripta type = "text / javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></skripta>
<skripta type = "text / javascript">
$(dokument).spreman(funkcija () {$(‘li.condition > IMG ').svaki(funkcija (indeks, stavka)
{
$(stavka).css("Širina", "60");
$(stavka).css("Visina", "50");
});
}); // na dokumenta opterećenja
</skripta>
To malo koda pronalazi zbirka <Li> tags čija klasa je "stanje" i <img> djeca. Tada ponovi kroz sve to. Izrađen poput milina.
Vjerojatno sam mogao pojednostaviti, ali nikada nisam bio tip čovjeka koji je riješio Unix π na 18 znamenke preciznost pomoću Sed i awk i nisam takav tip, ako jQuery bilo .
</kraj>
Slijedite me na Twitter-u http://www.twitter.com/pagalvin