Nog Meer jQuery–Grootte van 'n image Voorbeeld

Ek geërf het van 'n web deel van 'n kliënt se ou ondernemer en dit het 'n beeld grootte probleem.  Die beelde is 60×50 maar vir sommige vreemd rede, die oorspronklike verskaffer gedwing om hulle in 42×42, so kyk hulle platgedruk:

 

N goeie beeld

Slegte beeld

Hier is die winsgrens (ietwat vereenvoudigde):

<table class = "Gevorderde-vooruitsigte>
  <thead>
    <tr>
      <ste  width = '100′>3 Dinsdag</ste>
    </tr>
  </thead>

  <tbody>
    <tr class = "voorspelling">
      <td width = '100′>
        <Straat>
          <li class = 'n hoë>Hoë: 72&jy;F</li>
          <li class = "low">Lae: 44&jy;F</li>
          <li class = "toestand">Sunny
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ hoogte = '42’ alt =” />
          </li>
        </Straat>
      </td>
    </tr>

  </tbody>

</tafel>

Jy sal let dat hoewel die pad na die beeld self toon die korrekte dimensie (60×50) die oorspronklike verskaffer gedwing om dit in 42×42.  Hoekom?  Crazy.

In elk geval, Ek wou 'n vinnige en maklike oplossing vir hierdie kwessie en ek draai om jQuery.  Die geheim is om almal op te spoor van die toepaslike <img> tags.  Ek het nie wil die muck oor met enige ander img tags (wat daar is baie).  Hierdie bietjie van die jQuery het die truuk:

<script type = "text / javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type = "text / JavaScript">
     $(dokument).gereed(funksie () {

         $(‘li.condition > img ").elke(funksie (indeks, item)
           
{
             $(item).css("Width", "60"); 
             $(item).css("Hoogte", "50");
            });
     }); // dokument vrag
</script>

Daardie bietjie van die kode bevind dat die versameling <li> tags wie se klas is "toestand" en <img> kinders.  Dit iterate dan deur alles.  Soos 'n bom gewerk.

Ek kon dit waarskynlik meer vaartbelyn, maar ek was nog nooit die soort van die unix man wat opgelos π aan 18 syfers presisie met sed en AWK en ek is nie daardie soort indien jQuery man Smile.

</einde>

Skryf in op my blog.

Volg my op Twitter http://www.twitter.com/pagalvin

Laat 'n antwoord

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *