Vielä enemmän jQuery–Muuta kuva-esimerkki

Web-osan periytyvät asiakkaan vanha toimittajan ja sen kuvan koko ongelma.  Kuvien tulisi olla 60×50 mutta jostain kumman syystä, Alkuperäinen toimittaja pakotetaan 42×42, niin ne näyttävät litistynyt:

 

Hyvä kuva

Huono kuva

Tässä on merkintä (jonkin verran yksinkertaistettuja):

<taulukko class = "laajennettu outlook">
  <thead>
    <TR>
      <th  leveys = 100′>3 Tiistai</th>
    </TR>
  </thead>

  <TBODY>
    <p class = "ennuste">
      <TD leveys = 100′>
        <UL>
          <Li class = "korkea">Korkea: 72&astetta;F</Li>
          <Li class = "vähän">Matala: 44&astetta;F</Li>
          <Li class = 'ehto'>Aurinkoinen
            <IMG src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/En/Trans/cond007.png’ leveys = 42’ korkeus = 42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </TBODY>

</taulukko>

Saat huomata, että vaikka itse kuvan polku osoittaa asianmukaista ulottuvuus (60×50) Alkuperäinen toimittaja pakotti sen 42×42.  Miksi?  Hullu.

Joka tapauksessa, Halusin nopea ja helppo ratkaisu tähän kysymykseen ja käännyin jQuery.  Temppu oli löytänyt kaikki tarvittavat <IMG> Tunnisteet.  En halua hukata aikaa img Tagit (joista on monia).  Tässä vähän jQuery teki tempun:

<Script type = text/javascript"" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></Script>

<komentosarjan tyyppi = "text/javascript">
     $(asiakirja).valmis(funktio () {

         $("li.condition > img ").kunkin(funktio (indeksi, kohde)
           
{
             $(kohde).CSS("leveys", "60"); 
             $(kohde).CSS("korkeus", "50");
            });
     }); // asiakirja kuormitus
</Script>

Että vähän koodi toteaa kokoelma <Li> Tunnisteet, joiden luokka on "kunnossa" ja <IMG> lapset.  Sitten toistetaan läpi kaiken tämän.  Työntekijä kuin hurmata.

Voisimme luultavasti keventää se, mutta en ole koskaan ollut sellainen unix kaveri, joka ratkaista π - 18 numeroa tarkkuus sed ja awk ja en ole sellainen jos jQuery kaveri joko Hymy.

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Jätä vastaus

Sähköpostiosoitettasi ei julkaista. pakolliset kentät on merkitty *