クリックしてクラスを変更する

Question

クラスupを最初にクリックし、2番目のクリックでクラスdownを追加し、3回クリックするとすべてのクラスが削除されます。

これは私のコードですが、クラスがそれぞれ順番に適用されていません。

function initAdClass() { 
    var trigger = '.post-info h2'; 
    jQuery(trigger).click(function(e) { 
     if (jQuery(this).not('.up') && jQuery(this).not('.down')) { 
      jQuery(this).addClass('up'); 
     } 
     else if (jQuery(this).is('.up') && jQuery(this).not('.down')) { 
      jQuery(this).removeClass('up').addClass('down'); 
     } 
     else if (jQuery(this).not('.up') && jQuery(this).is('.down')) { 
      jQuery(this).removeClass('down'); 
     }   
    }); 
} 

Answer 1

はこのスニペットを試してみてください。 not`

var clicks=0; 
 
$('a').click(function(){ 
 
    
 
    clicks = !isNaN($(this).attr('id')) ? $(this).attr('id') + 1 : 0; 
 
    if(clicks == 1) 
 
    { 
 
    $(this).addClass('Up').html('Up added'); 
 
    } 
 
    if(clicks == 2) 
 
    { 
 
    $(this).removeClass('Up').addClass('Down').html('Up removed and Down Added'); 
 
    } 
 
    if(clicks == 3) 
 
    { 
 
    $(this).removeClass().html('All removed'); 
 
    clicks=0; 
 
    } 
 
    $(this).attr('id', clicks); 
 
    $(this).append(" " + clicks); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="javascript:void(0)">Trigger : 1 : </a> 
 

 
<br/><br/> 
 

 
<a href="javascript:void(0)">Trigger : 2 : </a> 
 

 
<br/><br/> 
 

 
<a href="javascript:void(0)">Trigger : 3 : </a>