Jquery .on（ 'click'、function（）は現在のクラスに応じて3つのクラスを切り替えます

Question

3つのクラスを切り替えるクラス 'grid'を持つボタンを操作しています。クラス '16pads'ボタンをクリックすると、クラス '16pads'が削除され、 '36pads'に置き換えられます。ボタンが再度クリックされ、hasClass '36pads'がクラス '36pads'を削除し、 '64pads'に置き換えられる必要があります。最後に、ボタンが '64pads'クラスでクリックされた場合、クラス '64pads'を削除し、 '16pads'に置き換える必要があります。

何らかの理由でそれをクリックすると、シーケンス全体をループするように見えますが、一度に1つずつ実行されます。

私は間違っていますか？

jQueryの

$('.grid').on('click',function() {  
    if ($(this).hasClass('16pads')); 
    { 
    $(this).removeClass('16pads'); 
    $(this).addClass('36pads'); 
    } 

    if ($(this).hasClass('36pads')); 
    { 
    $(this).removeClass('36pads'); 
    $(this).addClass('64pads'); 
    } 

    if ($(this).hasClass('64pads')); 
    { 
    $(this).removeClass('64pads'); 
    $(this).addClass('16pads'); 
    } 
}); 

Answer 1

ちょうどあなたの方法の実行の流れを想像：

1. それは16padsを持っていますか？はい。
2. 16padsを36padsに置き換えます。
3. 今、36padsがありますか？はい。
4. else ifでifを置き換えなど64padsと

を36padsを交換：今すぐ

$('.grid').on('click',function() {  
    if ($(this).hasClass('16pads')) 
    { 
    $(this).removeClass('16pads'); 
    $(this).addClass('36pads'); 
    } 
    else 
    if ($(this).hasClass('36pads')) 
    { 
    $(this).removeClass('36pads'); 
    $(this).addClass('64pads'); 
    } 
    else 
    if ($(this).hasClass('64pads')) 
    { 
    $(this).removeClass('64pads'); 
    $(this).addClass('16pads'); 
    } 
}); 

を、それが一度だけクラスを変更し、この方法を残します。

Answer 2

あなたは、他の

を追加する必要があると私はクラス名が16pads :)応答のための

$('.grid').on('click',function() {  
 
    if ($(this).hasClass('t_16pads')) 
 
    { 
 
    $(this).removeClass('t_16pads'); 
 
    $(this).addClass('t_36pads'); 
 
    } 
 

 
    else if ($(this).hasClass('t_36pads')) 
 
    { 
 
    $(this).removeClass('t_36pads'); 
 
    $(this).addClass('t_64pads'); 
 
    } 
 

 
    else if ($(this).hasClass('t_64pads')) 
 
    { 
 
    $(this).removeClass('t_64pads'); 
 
    $(this).addClass('t_16pads'); 
 
    } 
 
});

.t_16pads{ 
 
    font-size:16px; 
 
} 
 
    
 
.t_36pads{ 
 
    font-size:36px; 
 
} 
 
    
 
.t_64pads{ 
 
    font-size:64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="grid t_16pads">CLICK HERE</div>