jQuer - does't react to hasClass() : So I got this problem. The jQuery hasClass() isn't working as it should. When I click on text it should give it a class (and it does), but it doesn't check if it has that class?

Can someone help me?

There is my code!
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function() {


    $('#example').on('click', function() {
      $(this).addClass("redText");
    });

    if ( $('#example').hasClass("redText") ) {
      $('#example').addClass("bigText");
    }


    });

<!-- language: lang-css -->

    .redText{
      color: red;
    }
    .bigText{
      font-size: 20px;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="example">Hey</div>

<!-- end snippet -->

