Cách dễ nhất để chuyển đổi 2 lớp trong jQuery

Nếu tôi có lớp .A và lớp .B và muốn chuyển đổi giữa các lần nhấp vào nút, thì giải pháp nào tốt cho điều đó trong jQuery? Tôi vẫn không hiểu làm thế nào toggleClass()hoạt động.

Có một giải pháp nội tuyến để đưa nó vào onclick=""sự kiện?

Nếu phần tử của bạn hiển thị lớp Atừ đầu, bạn có thể viết:

$(element).toggleClass("A B");

Điều này sẽ loại bỏ lớp Avà thêm lớp B. Nếu bạn làm điều đó một lần nữa, nó sẽ xóa lớp Bvà khôi phục lớp A.

Nếu bạn muốn khớp các phần tử hiển thị một trong hai lớp, bạn có thể sử dụng bộ chọn nhiều lớp và viết:

$(".A, .B").toggleClass("A B");

Đây là một phiên bản đơn giản hóa: ( mặc dù không thanh lịch, nhưng dễ làm theo )

$("#yourButton").toggle(function() 
{
        $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'

}, function() {
        $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'

});

Ngoài ra, một giải pháp tương tự:

$('#yourbutton').click(function()
{
     $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});

Tôi đã tạo một plugin jQuery để làm việc DRY:

$.fn.toggle2classes = function(class1, class2){
  if( !class1 || !class2 )
    return this;

  return this.each(function(){
    var $elm = $(this);

    if( $elm.hasClass(class1) || $elm.hasClass(class2) )
      $elm.toggleClass(class1 +' '+ class2);

    else
      $elm.addClass(class1);
  });
};

Bạn chỉ có thể thử nó ở đây, sao chép và chạy nó trong bảng điều khiển và sau đó thử:

$('body').toggle2classes('a', 'b');

onClickYêu cầu của bạn :

<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>

Hãy dùng thử: https://jsfiddle.net/v15q6b5y/

Chỉ cần JS à la jQuery :

$('.selector').toggleClass('A', !state).toggleClass('B', state);

Đây là một cách 'không thông thường' khác.

• Nó ngụ ý việc sử dụng gạch dưới hoặc lodash .
• Nó giả định một bối cảnh nơi bạn:
  • phần tử không có lớp init (có nghĩa là bạn không thể thực hiện toggleClass ('a b'))
  • bạn phải có được lớp học năng động từ một nơi nào đó

Một ví dụ về kịch bản này có thể là các nút có lớp được bật trên một phần tử khác (giả sử các tab trong một thùng chứa).

// 1: define the array of switching classes:
var types = ['web','email'];

// 2: get the active class:
var type = $(mybutton).prop('class');

// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);

Giải pháp đơn giản nhất là toggleClass() cả hai lớp riêng lẻ.

Giả sử bạn có một biểu tượng:

    <i id="target" class="fa fa-angle-down"></i>

Để chuyển đổi giữa fa-angle-downvà fa-angle-upthực hiện các thao tác sau:

    $('.sometrigger').click(function(){
        $('#target').toggleClass('fa-angle-down');
        $('#target').toggleClass('fa-angle-up');
    });

Vì chúng tôi đã có fa-angle-downngay từ đầu mà không có fa-angle-uplần nào bạn chuyển đổi cả hai, một cái để cái kia xuất hiện.

Chuyển đổi giữa hai lớp 'A' và 'B' với Jquery.

$ ('# selecor_id'). toggleClass ("A B");