Tuy nhiên, bộ jQuery–Thay đổi kích thước một ví dụ hình ảnh

Tôi thừa kế một phần web từ đại lý cũ của một khách hàng và nó có một vấn đề kích thước hình ảnh.  Những hình ảnh nên là 60×50 nhưng đối với một số lý do lẻ, các nhà bán ban đầu buộc chúng thành 42×42, do đó, họ trông squashed:

 

Hình ảnh tốt

Hình ảnh xấu

Dưới đây là các đánh dấu (hơi đơn giản):

<Tabl lớp = 'mở rộng-outlook'>
  <thead>
    <tr>
      <th  chiều rộng ='100′>3 Thứ ba</th>
    </tr>
  </thead>

  <tbody>
    <tr lớp = 'thời'>
      <chiều rộng TD ='100′>
        <ul>
          <Li lớp = 'cao'>Cao: 72&deg;F</Li>
          <Li lớp = 'thấp'>Thấp: 44&deg;F</Li>
          <Li lớp = 'tình trạng'>Nắng
            <IMG src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/Trans/cond007.png’ chiều rộng ='42’ chiều cao ='42’ Alt =” />
          </Li>
        </ul>
      </TD>
    </tr>

  </tbody>

</Bàn>

Bạn sẽ lưu ý rằng mặc dù các đường dẫn đến hình ảnh cho thấy kích thước thích hợp (60×50) Các nhà cung cấp ban đầu buộc nó trong 42×42.  Tại sao?  Điên.

Dù sao, Tôi muốn có một giải pháp nhanh chóng và dễ dàng cho vấn đề này và tôi đã chuyển sang jQuery.  The trick là để xác định vị trí tất cả các thích hợp <IMG> Tags.  Tôi không muốn muck với bất kỳ thẻ img khác (trong đó có rất nhiều).  Này chút jQuery đã làm các trick:

<kiểu kịch bản = text/javascript"" SRC ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></kịch bản>

<kiểu kịch bản = "text/javascript">
     $(tài liệu).sẵn sàng(chức năng () {

         $(' li.condition > IMG').mỗi(chức năng (chỉ số, mục)
           
{
             $(mục).CSS("chiều rộng", "60"); 
             $(mục).CSS("chiều cao", "50");
            });
     }); // Tải tài liệu
</kịch bản>

Có chút mã tìm thấy bộ sưu tập <Li> Tags có lớp là "điều kiện" và <IMG> trẻ em.  Nó sau đó iterates thông qua tất cả mà.  Làm việc như một say mê.

Tôi có lẽ có thể sắp xếp nó, nhưng tôi không bao giờ một loại unix guy mà giải quyết π để 18 chữ số chính xác bằng cách sử dụng sed và awk và tôi không phải là loại đó nếu jQuery guy hoặc Nụ cười.

</kết thúc>

Đăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

Để lại câu trả lời

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *