Cara termudah untuk beralih 2 kelas di jQuery

Jika saya memiliki kelas .A dan kelas .B dan ingin beralih di antara klik tombol, apa solusi yang bagus untuk itu di jQuery? Saya masih tidak mengerti cara toggleClass()kerjanya.

Apakah ada solusi sebaris untuk menjalankannya onclick=""?

Jika elemen Anda mengekspos kelas Adari awal, Anda dapat menulis:

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

Ini akan menghapus kelas Adan menambah kelas B. Jika Anda melakukannya lagi, itu akan menghapus kelas Bdan mengembalikan kelas A.

Jika Anda ingin mencocokkan elemen yang mengekspos salah satu kelas, Anda dapat menggunakan pemilih beberapa kelas dan menulis:

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

Ini adalah versi yang disederhanakan: ( meskipun tidak elegan, tetapi mudah diikuti )

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

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

});

Atau, solusi serupa:

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

Saya telah membuat plugin jQuery untuk bekerja KERING:

$.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);
  });
};

Anda bisa mencobanya di sini, salin dan jalankan ini di konsol lalu coba:

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

Anda onClickpermintaan:

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

Cobalah: https://jsfiddle.net/v15q6b5y/

Hanya JS à la jQuery :

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

Berikut cara 'non-konvensional' lainnya.

• Ini menyiratkan penggunaan garis bawah atau lodash .
• Ini mengasumsikan konteks di mana Anda:
  • elemen tidak memiliki kelas init (itu berarti Anda tidak dapat melakukan toggleClass ('a b'))
  • Anda harus mendapatkan kelas secara dinamis dari suatu tempat

Contoh skenario ini bisa berupa tombol yang memiliki kelas untuk diaktifkan pada elemen lain (misalnya tab dalam wadah).

// 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);

Solusi termudah adalah untuk toggleClass()kedua kelas secara individual.

Katakanlah Anda memiliki ikon:

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

Untuk beralih di antara fa-angle-downdan fa-angle-uplakukan hal berikut:

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

Karena kami memiliki fa-angle-downdi awal tanpa fa-angle-upsetiap kali Anda beralih keduanya, satu meninggalkan yang lain muncul.

Beralih antara dua kelas 'A' dan 'B' dengan Jquery.

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