Почему не работает (this).parent вместе с setTimeout?

Question

[del993788]

Здравствуйте. По идее должно быть так: нажал на крест, блок стал прозрачным, блок исчез. Но по каким-то причинам через setTimeout не получается это сделать. Посмотрите https://jsfiddle.net/z8u367tn/

Answer 1

[Петр]

Потому что this это служебная переменная указывающая на текущий контекст.
Когда setTimeout вызывает анонимную функцию, то передает ей свой контекст.
Поэтому this до вызова setTimeout один, а в анонимной функции другой.

Для правильной работы вашего примера нужно воспользоваться замыканием и написать примерно так.

$(".fav-del").click(function(){
   $(this).parent(".fav-tov").addClass("opacity");
   var that = this;
   setTimeout(function(){ $(that).parent(".fav-tov").addClass("none"); }, 500);
});

Comments

[Алексей Уколов]

$(".fav-del").click(function(){
   var $wrapper = $(this).parent(".fav-tov");
   $wrapper.addClass("opacity");
   setTimeout(function(){$wrapper.addClass("none")}, 500);
});

[Алексей Уколов]

Ну а чтобы функции не плодить, можно и вовсе так:

$(".fav-del").click(function(){
   var $wrapper = $(this).parent(".fav-tov");
   $wrapper.addClass("opacity");
   setTimeout($wrapper.addClass.bind($wrapper, "none"), 500);
});

[Петр]

Алексей Уколов: Я тоже люблю так упрощать код для производительности, но в таком виде он не обьясняет проблему.

[Алексей Уколов]

Да, поэтому я и добавил комментарии, чтобы показать следующие логические шаги.
Тот код, который вы привели, хорошо помогает понять проблему, но писать так в жизни нельзя, пусть автор вопроса учится сразу делать.

[del993788]

Петр: эмм. не совсем я тот пример дал... Как в этом случае сделать тоже самое https://jsfiddle.net/z8u367tn/2/ ?

Answer 2

[Alexander Litvinenko]

Потому что у setTimeout свой this.
Вам надо его сохранить сначала куда-то, например:

var el = this;
setTimeout( function(){ $( el).....

Comments

[del993788]

так ответили уже... точно также как и вы

[Alexander Litvinenko]

qqignatqq: ничего, лишнее подтверждение что ответ верный.

[del993788]

Alexander Litvinenko: Alexander Litvinenko: Подскажи тогда, как сделать тоже самое, но только в таком случае https://jsfiddle.net/z8u367tn/2/

[Alexander Litvinenko]

qqignatqq: parent() указывает только на ближайшего родителя, а у вас между .fav-tov и .fav-del
есть еще .ha и a. Надо использовать parents() или closest()