Cách sử dụng switchClass và toggleClass trong jQuery – jquery chuyển đổi nhiều lớp

Trong hướng dẫn này, tôi chỉ ra cách bạn có thể sử dụng các phương thức jQuery switchClass và toggleClass để hoán đổi lớp từ phần tử HTML bằng các ví dụ khác nhau.

Bạn đang xem : jquery chuyển đổi nhiều lớp

SwitchClass và toggleClass là jQuery các phương thức được sử dụng để hoán đổi các lớp từ phần tử.

Bạn có thể sử dụng các phương thức này để thay đổi trạng thái của phần tử theo điều kiện, chuyển đổi các lớp trong phần tử hoặc có thể trong một số trường hợp khác.

Trong hướng dẫn này, tôi đang tạo nhiều ví dụ khác nhau để giải thích cả hai phương pháp.

Cách sử dụng switchClass và toggleClass trong jQuery

Nội dung

1.

switchClass

Nó được sử dụng để chuyển đổi lớp từ một phần tử. Để sử dụng nó, bạn cần thêm thư viện giao diện người dùng jQuery với jQuery trên trang.

Bạn có thể tải xuống từ trang web ngoại tuyến . Bạn có thể sử dụng CDN

 & lt; link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui .css "& gt; 

 & lt; script src =" https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui. min.js "& gt; & lt; / script & gt; 

Cú pháp –

 switchClass (removeClassName, addClassName, [, time]) 

< p> Tham số –

  • removeClassName – Đó là tên của một lớp mà bạn muốn thay thế.
  • addClassName – Đây là tên của một lớp mà bạn muốn thay thế.
  • thời lượng – Đây là tùy chọn từ đó bạn có thể đặt thời lượng hoạt ảnh diễn ra. tức là – giá trị có thể là ‘chậm’, ‘nhanh’, 400, 2000, v.v. Giá trị mặc định của nó là 400.

# Ví dụ 1 – Chuyển một lớp này sang lớp khác

Trong ví dụ này, tạo một danh sách bài đăng trong trạng thái chưa đọc và khi nhấp vào nút Đọc thì hãy thay đổi lớp Bài đăng.

HTML

Đã tạo cấu trúc 3 danh sách bài đăng và thêm class = ' bài chưa đọc '. Ngoài ra, một Nút Đọc để chuyển đổi lớp bằng jQuery.

 & lt; div class = 'container' & gt;
   & lt; div class = 'posts-list' & gt;
 
    & lt; div class = 'post-unread' id = 'post_1' & gt;
     & lt; h2 & gt; & lt; a href = 'https: //makitweb.com/schedule-posts-wordpress-without-plugin/'> Cách lập lịch đăng bài trong WordPress mà không cần plugin & lt; / a & gt; & lt; / h2 & gt;
     & lt; p & gt; Lên lịch đăng bài trong WordPress là tính năng có sẵn của nó, bạn không cần bất kỳ plugin bổ sung nào cho nó, điều này thật tuyệt. và nếu bạn muốn có nhiều tính năng bổ sung hơn thì bạn đi… & lt; / p & gt;
     & lt; button class = 'read' id = 'read_1' & gt; Read & lt; / button & gt;
    & lt; / div & gt;
 
    & lt; div class = 'post-unread' id = 'post_2' & gt;
     & lt; h2 & gt; & lt; a href = 'https: //makitweb.com/search-value-within-comma-separated-values-mysql/'> Tìm kiếm giá trị trong các giá trị được phân tách bằng dấu phẩy trong MySQL & lt; / a & gt; & lt ; / h2 & gt;
     & lt; p & gt; Trong hướng dẫn này, tôi sẽ chỉ cho bạn Cách tìm kiếm giá trị trong cột được phân tách bằng dấu phẩy trong bảng MySQL. Tôi sẽ giải thích về hàm FIND_IN_SET và sự khác biệt trong… & lt; / p & gt;
     & lt; button class = 'read' id = 'read_2' & gt; Read & lt; / button & gt;
    & lt; / div & gt;
 
    & lt; div class = 'post-unread' id = 'post_3' & gt;
     & lt; h2 & gt; & lt; a href = 'https: //makitweb.com/how-to-check-and-uncheck-all-using-jquery-and-javascript/'> Cách kiểm tra và bỏ chọn tất cả bằng jQuery và JavaScript & lt; / a & gt; & lt; / h2 & gt;
     & lt; p & gt; Trong hướng dẫn ngắn này, tôi sẽ chỉ cho bạn Cách bạn có thể chọn hoặc bỏ chọn tất cả các hộp kiểm và tùy chọn hộp danh sách bằng jQuery và JavaScript. Tôi sử dụng chúng nhiều lần trong… & lt; / p & gt;
     & lt; button class = 'read' id = 'read_3' & gt; Read & lt; / button & gt;
    & lt; / div & gt;
 
  & lt; / div & gt;
 
 & lt; / div & gt; 

jQuery

Khi nhấp vào nút Đọc , hãy tách id nút để lấy id bài đăng .

Kiểm tra phần tử post_id class = 'post-unread' hay không. Nếu một lớp có trên phần tử thì hãy chuyển lớp post-chưa đọc bằng post-read và thay đổi văn bản nút thành 'UnRead' . < / p>

Tương tự, nếu lớp không hiển thị thì chuyển lớp post-read với post-unread và thay đổi văn bản nút bằng 'Read' < / code>.

 $ (tài liệu) .ready (function () {
 $ (". read"). click (function () {
    var id = this.id;
    var split_id = id.split ('_');
    var post_id = 'post _' + split_id [1];
 
    // Kiểm tra lớp bằng hasClass
    if ($ ('#' + post_id) .hasClass ('post-unread')) {
 
       // Chuyển lớp từ bài đăng chưa đọc sang bài viết đã đọc
       $ ('#' + post_id) .switchClass ("chưa đọc", "sau khi đọc");
       $ (this) .text ('UnRead'); // Thay đổi Văn bản Nút
    }khác{
       // Chuyển lớp từ sau đọc thành chưa đọc
       $ ('#' + post_id) .switchClass ("sau khi đọc", "chưa đọc");
       $ (this) .text ('Đọc'); // Thay đổi Văn bản Nút
    }
 
 });
}); 

CSS

 .posts-list h2 {
 font-weight: bình thường;
 khoảng cách giữa các chữ cái: 1px;
}
.posts-list h2 a {
 văn bản-trang trí: không có;
 màu trắng;
}
.posts-list p {
 chiều cao dòng: 20px;
 text-align: justify;
}
.post-chưa đọc {
 màu nền: # 32cbb4;
 đệm: 5px;
 bán kính đường viền: 3px;
 margin-bottom: 15px;
 màu trắng;
}

.post-read {
 màu nền: # f7c282;
 đệm: 5px;
 bán kính đường viền: 3px;
 margin-bottom: 15px;
 màu trắng;
}
.đọc{
 bán kính đường viền: 3px;
 màu nền: # ff7373;
 màu trắng;
 đệm: 5px 15px;
 font-size: 16px;
 khoảng cách giữa các chữ cái: 1px;
 display: inline-block;
 viền: 0;
}

.read: hover {
 con trỏ: con trỏ;
} 

Xem bản trình diễn

# Ví dụ 2 - Sử dụng thời lượng với swichClass

Trong ví dụ thứ hai, sử dụng thời lượng với phương thức switchClass () .

HTML < / strong>

Tạo một menu thả xuống để thay đổi giá trị thời lượng và tạo hai div với lớp đỏ xanh .

 & lt; div class = 'container' & gt;
    Đặt Thời lượng: & lt; select id = 'time' & gt;
     & lt; option value = 'slow' đã chọn & gt; chậm & lt; / option & gt;
     & lt; option value = 'nhanh' & gt; nhanh & lt; / option & gt;
     & lt; option value = '400' & gt; 400 & lt; / option & gt;
     & lt; option value = '800' & gt; 800 & lt; / option & gt;
     & lt; option value = '1200' & gt; 1200 & lt; / option & gt;
     & lt; option value = '20000' & gt; 20000 & lt; / option & gt;
    & lt; / chọn & gt; & lt; br / & gt;
    & lt; div class = 'red' id = 'div1' & gt; & lt; / div & gt;
    & lt; div class = 'blue' id = 'div2' & gt; & lt; / div & gt;
  & lt; / div & gt; 

jQuery

Xác định nhấp vào sự kiện trên các vùng chứa & lt; div id = 'div1' & gt; & lt; div id = 'div2' & gt; .

Khi nó được kích hoạt, hãy lấy thời lượng từ menu thả xuống và sử dụng giá trị trong phương thức switchClass () .

 $ (document) .ready (function ( ) {
 
 $ ('# div1, # div2'). click (function () {
    var thời lượng = $ ('# tùy chọn thời lượng: đã chọn'). val ();
    if (thời lượng! = 'chậm' & amp; & amp; thời lượng! = 'nhanh') {
      thời lượng = Số (thời lượng);
    }
 
    if ($ (this) .hasClass ('red')) {
      $ (this) .switchClass ("red", "blue", thời lượng);
    }khác{
      $ (this) .switchClass ("xanh", "đỏ", thời lượng);
    }
 
 });
 
}); 

CSS

 .red {
 background-color: đỏ;
 lề trái: 10px;
 chiều rộng: 120px;
 chiều cao: 120px;
 float: trái;
 margin-top: 10px;
}
.màu xanh da trời{
 background-color: blue;
 lề trái: 10px;
 chiều rộng: 120px;
 chiều cao: 120px;
 float: trái;
 margin-top: 10px;
} 

Xem bản trình diễn

2.

toggleClass

Nó chuyển đổi các lớp trong một phần tử và để sử dụng phần tử này, bạn không cần phải bao gồm thư viện giao diện người dùng jQuery.

Bạn có thể làm gì với nó -

  • chuyển đổi lớp
  • thêm lớp
  • xoá lớp

Cú pháp -

 toggleClass (className [, state]) 

Tham số -

  • className - Tên lớp đó được chuyển đổi. Nhiều lớp được phân tách bằng dấu cách.
  • trạng thái - Đây là một tham số tùy chọn và nó nhận giá trị Boolean. Nếu bạn chuyển true thì nó sẽ thêm lớp vào phần tử và nếu là false thì nó sẽ xóa lớp được chỉ định khỏi phần tử.

# Ví dụ 1 - chuyển đổi lớp của một phần tử

Trong ví dụ này, sử dụng phương thức toggleClass để chuyển đổi lớp của một phần tử đoạn văn.

HTML

 & lt; div class = 'container' & gt;
   & lt; p class = 'normal' & gt; Sử dụng toggleClass để thay đổi lớp của một đoạn văn & lt; / p & gt;
   & lt; button id = 'toggle' & gt; Chuyển đổi & lt; / button & gt;
& lt; / div & gt; 

jQuery

Chuyển đổi lớp phần tử & lt; p & gt; khi nhấp vào nút bật tắt.

 $ (document) .ready (function () {

 $ ("# chuyển đổi"). nhấp vào (function () {
   $ ('p'). toggleClass ('bình thường lớn hơn');
 });

}); 

CSS

 .normal {
    font-size: 15px;
    chiều cao dòng: 20px;
    màu sắc: tia cực tím;
}

.to hơn{
    font-size: 25px;
    màu: xanh rừng;
} 

Xem bản trình diễn

# Ví dụ 2 - Sử dụng với trạng thái

Tôi đang sử dụng cùng một ví dụ như trên nhưng đã thêm một nút nữa và chuyển tham số thứ hai vào toggleClass trong jQuery.

HTML

Đã thêm một đoạn và hai nút để thêm và xóa lớp khỏi đoạn khi nó được nhấp vào.

 & lt; div class = 'container' & gt;
   & lt; p class = 'normal' & gt; Sử dụng toggleClass để thay đổi lớp của một đoạn văn & lt; / p & gt;
   & lt; button id = 'toggle1' & gt; Thêm lớp & lt; / button & gt; & amp; nbsp; & lt; button id = 'toggle2' & gt; Xóa lớp & lt; / button & gt;
& lt; / div & gt; 

jQuery

Khi nút đầu tiên được nhấp thì chuyển true làm tham số thứ hai trong toggleClass. Điều này thêm lớp to hơn vào phần tử & lt; p & gt; .

Tương tự như lớp đầu tiên nhưng chuyển false trong toggleClass khi nhấp vào nút thứ hai. Thao tác này xóa lớp to hơn khỏi phần tử & lt; p & gt; nếu có.

 $ (document) .ready (function () {
   $ ("# toggle1"). nhấp vào (function () {
        // Nó thêm lớp lớn hơn vào đoạn văn
       $ ('p'). toggleClass ('lớn hơn', true);
   });
 
   $ ("# toggle2"). nhấp vào (function () {
       // Nó loại bỏ lớp lớn hơn thành đoạn văn
       $ ('p'). toggleClass ('lớn hơn', sai);
    });
}); 

Xem bản trình diễn

3.

Kết luận

Để sử dụng phương thức switchClass () , bạn cần bao gồm thư viện giao diện người dùng jQuery trong trang web của mình và đối với toggleClass () thì không bắt buộc.

Bạn có thể đọc thêm về nó từ đây -

Nếu bạn thấy hướng dẫn này hữu ích thì đừng quên chia sẻ.


Xem thêm những thông tin liên quan đến chủ đề jquery chuyển đổi nhiều lớp

jquery 05 Changing CSS styles with jQuery

alt

  • Tác giả: Intro to Web Apps
  • Ngày đăng: 2018-11-10
  • Đánh giá: 4 ⭐ ( 5554 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Changing the appearance of elements in your HTML with jQuery is super easy, once you learn the syntax of the .css() method. But even more powerful is the ability to add and remove CSS classes on the fly, using styles you wrote into your CSS file. You'll learn how changing or adding ONE property requires a different syntax from adding MULTIPLE property-value pairs, as well as how to toggle between two different sets of styles.

    Covered in this video:

    .css()
    .addClass()
    .removeClass()
    .toggleClass()

    Code:

    There is no code for this video. There are links to code in other videos in this series.

    Links:

    jQuery and CSS (many good examples here) http://api.jquery.com/css/

  • Tác giả: tailieutuoi.com
  • Đánh giá: 3 ⭐ ( 7560 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 3771 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học - Học Web Chuẩn

Chuyển đổi các lớp CSS của các phần tử HTML

  • Tác giả: hiepsiit.net
  • Đánh giá: 5 ⭐ ( 3647 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Một thành phần chuyển đổi nội dung được xây dựng 3 cách: jQuery, JS, CSS

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 1998 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Scott O'Hara kiểm tra cách sao chép tiện ích giao diện người dùng dựa trên jQuery trước tiên bằng jQuery, sau đó sử dụng JavaScript vani và cuối cùng là CSS thuần túy.

Chuyển đổi lớp CSS bằng jQuery

  • Tác giả: trithucdoisong.net
  • Đánh giá: 4 ⭐ ( 3243 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài đăng này, chúng ta sẽ chuyển đổi lớp CSS bằng jQuery. Trong một bài trước, chúng ta đã biết cách chuyển đổi tệp CSS dựa trên kích thước màn hình để

Thêm nhiều lớp CSS vào các phần tử HTML

  • Tác giả: www.hiepsiit.com
  • Đánh giá: 4 ⭐ ( 8334 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  SQL KHÔNG TRONG - sql chọn nơi không