jQuery: Thêm lớp động tùy thuộc vào độ phân giải cửa sổ trình duyệt

Question

Xin chào bạn bè Tôi đang cố gắng thêm lớp học vào nội dung động tùy thuộc vào độ phân giải cửa sổ trình duyệt. Đây là mã tôi đang cố gắng sử dụng nhưng cần trợ giúp điều chỉnh nó như tôi không biết jQuery ở tất cả.

Các tùy chọn tôi muốn đạt được là:

Khi một người truy cập đến trang web của tôi, mã này phải kiểm tra kích thước cửa sổ trình duyệt của mình và thêm lớp để cơ thể theo các quy tắc sau

1. Nếu kích thước cửa sổ là nhiều hơn 1024px nhưng nhỏ hơn 1280px rồi thêm lớp .w1280.

2. Nếu kích thước cửa sổ là hơn 1280px nhưng ít hơn 1440px sau đó thêm lớp .w1440.

3. Nếu kích thước cửa sổ là hơn 1440px nhưng ít hơn 1280px sau đó thêm lớp .w1680.

4. Nếu kích thước cửa sổ là hơn 1680px rồi thêm lớp .wLarge.

Để đạt được điều này, tôi đang cố gắng sử dụng tập lệnh sau. Câu hỏi của tôi là:

1. Đây có phải là mã đúng? Nếu không đúng mã là gì?

2. Đây có phải là mã tốt nhất có thể ngắn nhất? Nếu không phải mã nào sẽ đúng?

Vui lòng giúp đỡ như kiến ​​thức về jQuery của tôi gần như là KHÔNG.

function checkWindowSize() { 
    if ($(window).width() > 1024) { 
     $('body').addClass('w1280'); 
     } else { 
     $('body').removeClass('w1280'); 
    } 
    if ($(window).width() > 1280) { 
     $('body').addClass('w1440'); 
     } else { 
     $('body').removeClass('w1440'); 
    } 
    if ($(window).width() > 1440) { 
     $('body').addClass('w1680'); 
     } else { 
     $('body').removeClass('w1680'); 
    } 
    if ($(window).width() > 1600) { 
     $('body').addClass('wLarge'); 
     } else { 
     $('body').removeClass('wLarge'); 
    } 
}  
checkWindowSize() 

Answer 1

Nếu bạn không lưu trữ bất kỳ lớp học khác trên các yếu tố body, bạn có thể làm điều này:

function checkWindowSize() { 
    var width = $(window).width(); 
    document.body.className = width > 1600 ? 'wLarge' : 
           width > 1440 ? 'w1680' : 
           width > 1280 ? 'w1440' : 
           width > 1024 ? 'w1280' : ''; 
} 

Một số người có thể tư vấn cho bạn để làm điều đó với một tuyên bố switch, nhưng sau đó, một số mọi người cũng thích ăn trẻ của họ.

Chức năng này sẽ ghi đè lên lớp của body mỗi lần được gọi (mặc định, nếu trình duyệt nhỏ hơn/bằng 1024 pixel, không có lớp nào cả), vì vậy như tôi đã nói, nó sẽ không hoạt động nếu body của bạn có các lớp khác cần phải được duy trì.

EDIT gợi ý mỗi Šime của, đây là một cách an toàn hơn để làm điều đó:

function checkWindowSize() { 
    var width = $(window).width(), 
    new_class = width > 1600 ? 'wLarge' : 
       width > 1440 ? 'w1680' : 
       width > 1280 ? 'w1440' : 
       width > 1024 ? 'w1280' : ''; 

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class); 
}