Еще больше jQuery–Изменение размера изображения пример

Я унаследовал веб-часть от старого поставщика клиента и он имеет проблему размер изображений.  Изображения должны быть 60×50 но для некоторых странно причине, первоначальный поставщик заставили их в 42×42, Таким образом они выглядят сжато:

 

Хорошее изображение

Плохое изображение

Вот разметка (несколько упрощена):

<Таблица класса = «продлен outlook»>
  <thead>
    <TR>
      <th  Ширина ='100′>3 Вторник</th>
    </TR>
  </thead>

  <tbody>
    <TR класса = «прогноз»>
      <ТД width = "100′>
        <UL>
          <ли класса = «высокий»>Высокая: 72&град;F</ли>
          <ли класса = «низкая»>Низкая: 44&град;F</ли>
          <ли класса = «состояние»>Солнечный
            <img src =’
HTTP://deskwx.WeatherBug.com/Images/Forecast/icons/localized/60×50/EN/TRANS/cond007.PNG’ Ширина ='42’ Высота ='42’ ALT =” />
          </ли>
        </UL>
      </ТД>
    </TR>

  </tbody>

</Таблица>

Можно отметить, что хотя путь к изображению, сам показывает надлежащее измерение (60×50) первоначальный поставщик вынудил его в 42×42.  Почему?  Crazy.

В любом случае, Я хотел быстрого и простого решения этой проблемы, и я повернулся к jQuery.  Хитрость заключается в том, чтобы найти все соответствующие <IMG> Теги.  Я не хочу, чтобы сбросить карты с других тегов img (из которых есть много).  Этот бит jQuery сделал трюк:

<сценарий type = "текст/javascript" src ="HTTP://AJAX.googleapis.com/AJAX/libs/jQuery/1.5/jQuery.min.js"></сценарий>

<сценарий type = «текст/javascript»>
     $(документ).готов(функция () {

         $(' li.condition > IMG').Каждый(функция (индекс, пункт)
           
{
             $(пункт).CSS(«Ширина», «60»); 
             $(пункт).CSS(«Высота», «50»);
            });
     }); // при загрузке документа
</сценарий>

Что немного кода находит коллекции <ли> Теги, чей класс является «условие» и <IMG> дети.  Затем выполняется итерация всего этого.  Работал как Шарм.

Я мог бы вероятно рационализировать, но я никогда не был вида парень unix, решена π Кому 18 точность цифр с помощью sed и awk и я не такого рода, если jQuery парень, либо Улыбка.

</конец>

Подписаться на мой блог.

Следуй за мной по щебетать на http://www.twitter.com/pagalvin

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *