Why the code does not work, although it is written in compliance with different standards (ECMAScript)? Here is the code:

$('.tab').click( function () { $('.tab').css({ 'color': 'gray', 'border': '1px solid #ececec' }); $(this).css({ 'color': '#000', 'border': '1px solid orange' }) } ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab">1</div> <div class="tab">2</div> <div class="tab">3</div> <div class="tab">4</div> <div class="tab">5</div> <div class="tab">6</div>

And this one doesn't work ...

 $('.tab').click( ()=>{ $('.tab').css({ 'color': 'gray', 'border': '1px solid #ececec' }); $(this).css({ 'color': '#000', 'border': '1px solid orange' }) } ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab">1</div> <div class="tab">2</div> <div class="tab">3</div> <div class="tab">4</div> <div class="tab">5</div> <div class="tab">6</div>

    2 answers 2

    Because the switch function has no this .

     // 1. $('.tab').click( ()=>{ ... $(this).css({ // !!! this здесь тот же, что и в строчке 1.

    https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

      The main feature of the switch functions is not their brevity, but the fact that they have no context, that is, this not set to $('.tab') :

       $('.tab').click( function(){console.log(this);} ); // Html элемент $('.tab').click( () => {console.log(this);} ); // Window 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab">Click</div>