Veel rohkem jQuery–Näide pildi suuruse muutmine

Veebiosa päritud kliendi vana hankija ja see on probleem graafika suurus.  Pildid peaksid olema 60×50 kuid mõned veider põhjus, esialgse tarnija sundis neid 42×42, nii et nad näevad kokkupigistatud:

 

Hea pilt

Halb pilt

Siin on märgistus (mõnevõrra lihtsustatud):

<Tabel klassi = "extended-outlook">
  <thead>
    <TR>
      <th  laius = "100′>3 Teisipäev</th>
    </TR>
  </thead>

  <tbody>
    <TR klassi = "prognoos">
      <TD laius = "100′>
        <UL>
          <Li klassi = "kõrge">Kõrge: 72&kraadi;F</Li>
          <Li klassi = "madal">Madala: 44&kraadi;F</Li>
          <Li klassi = "tingimus">Päikeseline
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/EN/trans/cond007.png’ laius = "42’ kõrgus = "42’ alt =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</Tabel>

Sa pead tähele, et kuigi Euroopa tee pilt ise kuvatakse õige mõõt (60×50) esialgse tarnija sunnitud 42×42.  Miks?  Hull.

Igatahes, Tahtsin kiire ja lihtne lahendus sellele probleemile ja keerasin jQuery.  Trikk oli leidma kõik asjakohased <img> Sildid.  Ma ei tahtnud sopp img siltidega (mida on palju).  See natuke jQuery ei trikk:

<script type = tekst/javascript"" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></skripti>

<script type = "tekst/javascript">
     $(dokumendi).valmis(funktsioon () {

         $(' li.condition > img ").iga(funktsioon (indeks, kauba)
           
{
             $(kauba).CSS("laius", "60"); 
             $(kauba).CSS("kõrgus", "50");
            });
     }); // dokumendi laadimisel
</skripti>

See natuke koodi leiab kogumine <Li> Sildid, kelle klassis on "seisund" ja <img> lapsed.  Ta kordab siis kõik see läbi.  Töötas nagu võlu.

Ma oleks ilmselt sujuvamaks, Aga ma ei ole kunagi olnud üks selline unix mees, et lahendada π et 18 numbrite täpsus sed ja awk ja ma ei ole sellist kui jQuery mees kas naeratus.

</lõpp>

Telli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin

Jäta vastus

Teie e-posti aadressi ei avaldata. Kohustuslikud väljad on tähistatud *