Почему код не срабатывает, хотя он написан с соблюдением разных стандартов (ECMAScript)?

158
27 октября 2019, 22:50

Почему код не срабатывает, хотя он написан с соблюдением разных стандартов (ECMAScript) ? Вот код:

$('.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>

А этот не срабатывает ...

$('.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>

Answer 1

Потому что стрелочная функция не имеет своего this-а.

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

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

Answer 2

Главная особенность стрелочных функций не их краткость, а то что у них нет контекста, то есть this не установлен на $('.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>

READ ALSO
Не работает вывод данных с API RandomUser
javascript

Не работает вывод данных с API RandomUser

Нужно выводить рандомно данные с сайта https://randomuserme/ , но что-то пошло не так, на ютубе смотрел как это делают, но у меня ругается консоль

 153
Как активировать input radio после preventDefault?
javascript

Как активировать input radio после preventDefault?

Добрый вечер уважаемые программисты! Помогите плиз разобраться с input preventDefaultЕсть таблица

 173
Как назвать файл для перехода по ссылке?
javascript

Как назвать файл для перехода по ссылке?

Когда я выбираю 3 пункта и нажимаю кнопку меня перебрасывает на адрес, я хочу что бы под этим адресом была страница, но я не понимаю как мне...

 172
DOM Удалить при 10 елементах
javascript

DOM Удалить при 10 елементах

Есть кнопка при нажатии создает li в ul

 166