Ipak Više jQuery–Stanovati primjer slike

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 Osmijeh.

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Dopust jedan Odgovor

Vaša email adresa neće biti objavljena. obavezna polja su označena *