Học web chuẩn

jQuery fix chiều cao 2 thành phần

Bài tập

  • Viết cách khác sao cho gọn hơn, và có thể sử dụng được: Cho một danh sách 2 thành phần như bên dưới, viết script fix chiều cao cho 2 thành phần bằng nhau. 
    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Học web chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  body {
    color: #383838;
    font-family: Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
  }
  .list li {
    border: 1px solid #ccc;
    float: left;
    padding: 10px;
    width: 300px;
  }
</style>
<script>
$(function(){
  /* Code viết ở đây ↓ */

});
</script>
</head>

<body>
  <ul class="list">
    <li>orem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Sed id urna facilisis, fringilla ex nec, gravida est.</li>
    <li>Praesent id porta turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Nam elit sapien, fringilla a turpis vel, pretium molestie nisi.<br>
Donec efficitur, quam eu auctor blandit,</li>
  </ul>
</body>
</html>

Hướng dẫn

  • Định nghĩa chiều cao lớn nhất (maxH), so sánh chiều cao với các thành phần li (sử dụng .each()), nếu thành phần nào lớn hơn maxH thì gán maxH bằng chiều cao đó, so sánh toàn list, sau đó gán chiều cao tất cả thành phần bằng maxH.

Công thức chung

  • Bài giải này dựa trên bài học jQuery, các bạn cần học qua về jQuery để hiểu về bài tập này.
  • Trong bài tập, Học Web Chuẩn sẽ lồng ghép một số cách viết câu điều kiện, vòng lặp và function Javascript, ... mục đích giúp cho các bạn làm quen dần cách sử dụng những vấn đề này.
  • Trong bài giải các bạn cố gắng tập cho quen cách đặt biến, viết function, thay vì xử lý trực tiếp, sẽ giúp source code của mình tối ưu hơn.
  • Các bước xử lý:
    • Yêu cầu sao thì viết y như vậy, có nghĩa là bạn cần cấu trúc nó ra giấy cho dễ hình dung, VD đề bài kêu so sánh 2 số a và b, và xuất ra số lớn hơn. Thì việc trước mắt là cần có số a và b, xong cần phải so sánh nếu a lớn hơn thì sao? nếu a nhỏ hơn thì sao? kết quả sẽ xuất hiện ở đâu? bạn thể hiện ra giấy vấn đề này, sau khi thấy ổn thì tiến hành viết code.
    • Nếu ứng dụng phức tạp, thì cần chia nhỏ ứng dụng ra, bằng cách sử dụng function.

↔