javascript - 单击更改类别

Question

我想在第一次单击时添加类up，在第二次单击时添加类down，然后在第三次单击时删除所有类。

这是我的代码，但类没有按各自的顺序应用:

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

试试这个片段。

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>