Как через wpcf7mailsent добавить класс к одному попапу, а не всем, в которых данная форма?

Question

[Dimtri]

Если одна и та же форма вызывается в попапах на странице несколько раз, то как обратиться к родителю конкретной форме, т.к. this не работает?
Так не работает:

document.addEventListener( 'wpcf7submit', function( event ) {
	if ( '123' == event.detail.contactFormId ) {
		$(this).parents('.modal-body').addClass('thanks-this');
	}
}, false );

Так работает:

document.addEventListener( 'wpcf7submit', function( event ) {
	if ( '123' == event.detail.contactFormId ) {
		$('.modal-body').addClass('thanks-this');
	}
}, false );

Но так, естественно, новый класс прикрепляется ко всем попапам.

Answer 1

[Михаил Р.]

Если одна и та же форма вызывается в попапах на странице несколько раз, то как обратиться к родителю конкретной форме, т.к. this не работает?

У анонимных функций в js нет своего this, соответственно берется this из скоупа выше.

Но так, естественно, новый класс прикрепляется ко всем попапам.

Можно попробовать искать ближайшего родителя с css классом modal-body (т.е. настоящей формы, где сработало событие wpcf7submit):

document.addEventListener('wpcf7submit', (e) => {
    if ('123' === e.detail.contactFormId) {
        const form = e.target;
        const modalBody = form.closest('.modal-body');

        if(modalBody) {
            modalBody.classList.add('thanks-this');
        }
        else {
            console.log('Творится какая то дичь!');
        }
    }
});