jQuery show() vs thêm lớp

Question

nào sau đây là hiệu quả hơn (ví dụ nhanh hơn):

$(elem).show(); 

hoặc

$(elem).addClass(displayClass); // Where display class is "display: block;" 

Hoặc là họ giống hệt nhau?

Answer 1

Không, chúng hoàn toàn là không phải giống hệt nhau.

Có lớn khác biệt giữa sửa đổi trực tiếp với kiểu phần tử và sửa đổi "gián tiếp" bằng cách thay đổi lớp của phần tử và điều đó thực sự khá rõ ràng. Bằng cách viết mã hợp tác giữa Javascript và CSS, các thay đổi của lớp giúp bạn linh hoạt hơn nhiều. Javascript quản lý trạng thái trạng thái trong khi CSS thúc đẩy hiệu ứng thực tế của trạng thái đó.

Các phương pháp show() và hide() tiện dụng và dễ dàng, nhưng (theo ý kiến ​​của tôi) quản lý trạng thái/ngoại hình theo tên lớp thực sự là một cách mạnh mẽ hơn và có thể bảo trì để làm việc. Trong thực tế, bạn luôn có thể viết các plugin jQuery nhỏ của riêng bạn để thêm/xóa các lớp có ý nghĩa với ứng dụng của bạn, để tránh việc tự mình truyền bá tên lớp thông qua mã của bạn.

Answer 2

Nó phụ thuộc những gì bạn đang sau, họ làm những việc khác nhau:

• $(elem).show(); - cho thấy yếu tố, khôi phục display từ trước .hide() hoặc khôi phục mặc định display cho các loại nguyên tố
• $(elem).addClass(displayClass); - cho biết thêm một lớp, luôn luôn có một số display nhất định, không thực sự khôi phục những gì là ở đó - điều này ít linh hoạt hơn

---

Đó là nhanh hơn? .addClass() tay xuống, you can test it yourself here, chỉ cần does a lot less work hơn .show() does. Tuy nhiên, nó không làm nhiều tính năng khôn ngoan, vì vậy nó ít linh hoạt hơn vì những lý do trên.

Answer 3

Chúng không giống nhau; chúng hoạt động hoàn toàn khác nhau. Họ có thể trong trường hợp của bạn có tác dụng tương tự, nhưng không tin vào nó. Ví dụ: addClass có thể không thực sự hiển thị phần tử trong mọi trường hợp. Nếu phần tử có các phong cách khác mà supercede lớp (ví dụ như ID cấp ID, hoặc phong cách nội tuyến, vv), sau đó thêm một lớp học sẽ không có bất kỳ hiệu ứng nào cả.

Ngoài ra, đặt display:block chỉ đúng cho các thành phần bạn muốn hiển thị dưới dạng khối. Nếu bạn có các yếu tố nội tuyến (hoặc tệ hơn, các bảng) và bạn cố gắng hiển thị chúng dưới dạng khối, kết quả có thể không phải là những gì bạn mong đợi.

Cuối cùng, .addClass() chắc chắn liên quan đến việc xử lý nhiều hơn cho trình duyệt hơn .show(), vì vậy bạn không làm mọi thứ dễ dàng hơn cho trang web của mình bằng cách sử dụng nó.

Tóm lại, nếu đó là tất cả những gì bạn đang cố gắng đạt được, hãy sử dụng .show() - đó là cách jQuery chính xác để làm điều đó.