JQuery'de 2 sınıf arasında geçiş yapmanın en kolay yolu

Sınıf .A ve sınıf .B varsa ve düğme tıklatması arasında geçiş yapmak istiyorsanız, jQuery için güzel bir çözüm nedir? Hala nasıl toggleClass()çalıştığını anlamıyorum .

onclick=""Etkinliğe yerleştirmek için satır içi bir çözüm var mı ?

Öğeniz Abaşlangıçtan itibaren sınıfı gösterirse şunları yazabilirsiniz:

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

Bu, sınıfı kaldıracak Ave sınıf ekleyecektir B. Bunu tekrar yaparsanız, sınıfı kaldırır Bve sınıfı eski haline getirir A.

Sınıflardan herhangi birini ortaya çıkaran öğelerle eşleştirmek istiyorsanız, birden çok sınıf seçicisi kullanabilir ve şunu yazabilirsiniz:

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

İşte basitleştirilmiş bir sürüm: ( zarif olmasa da takip edilmesi kolay )

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

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

});

Alternatif olarak, benzer bir çözüm:

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

DRY çalışmak için bir jQuery eklentisi yaptım:

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

Burada deneyebilir, bunu konsolda kopyalayıp çalıştırabilir ve ardından şunları deneyebilirsiniz:

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

Sizin onClickistek:

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

Deneyin: https://jsfiddle.net/v15q6b5y/

Sadece JS à la jQuery :

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

İşte başka bir 'geleneksel olmayan' yol.

• Alt çizgi veya lodash kullanımını ima eder .
• Aşağıdaki durumlarda bir bağlam varsayar:
  • öğenin bir init sınıfı yok (yani toggleClass ('a b') yapamazsınız)
  • sınıfı dinamik olarak bir yerden almak zorundasın

Bu senaryonun bir örneği, sınıfı başka bir öğeye (bir kaptaki sekmeleri söyleyin) açacak düğmeler olabilir.

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

En kolay çözüm toggleClass()her iki sınıfa da bireysel olarak.

Diyelim ki bir simgeniz var:

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

Arasında geçiş yapmak fa-angle-downve fa-angle-upaşağıdakileri yapın:

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

Biz bu yana fa-angle-downolmadan başında fa-angle-uphem arasında her geçiş, diğeri için bir yaprak görünmesi.

Jquery ile iki 'A' ve 'B' sınıfı arasında geçiş yapın.

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