add more then 2 class in jquery

----------------------------------------------------------
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(e) {
        var $li = $('.nav li')
        $li.click(function(e) {
           if($(this).hasClass('all')){
                 $(this).removeClass('all').addClass('middle').css('color','red');
             }
             else if($(this).hasClass('middle')){
                 $(this).removeClass('middle').addClass('none').css('color','purple');
                 }
             else {
                     $(this).removeClass('none').addClass('all').css('color','blue');
                     }
        });
    });
</script>
   
<ul class="nav">
        <li class="all" style="color:blue;">click me</li>
    </ul>




---------------------------------------------------------