Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Действие после события (https://javascript.ru/forum/events/86406-dejjstvie-posle-sobytiya.html)

ureech 23.04.2025 22:37

Действие после события
 
Привет. Клик по блоку закрывает его и при условии, что он находится сверху другого блока, меняется цвет.
var bodyChat = document.querySelector('.form-body');
        $('.float-chat').on('click', function (e) {
            bodyChat.classList.toggle('show');
            if (icms.chat.elementIsVis('.icms-footer__middle')) {
                if (float_chat.style.color != "") {
                    float_chat.style = ""
                } else {
                    float_chat.style.backgroundColor = '#ecccbd';
                    float_chat.style.color = '#1c223e';
                }
            }
});


Код:

<style>
.form-body {
    position: relative;
    width:100%;
    height:100%;
    margin-bottom:-300px;
    transition: margin 0.5s linear;
}
</style>

Как сделать, что бы цвет менялся после завершения toggle()? То есть, после того, как блок закроется, а не во время клика.

voraa 23.04.2025 22:58

Через timeout можно
var bodyChat = document.querySelector('.form-body');
$('.float-chat').on('click', function (e) {
	bodyChat.classList.toggle('show');
	if (icms.chat.elementIsVis('.icms-footer__middle')) {
		setTimeout (() => {
			if (float_chat.style.color != "") {
				float_chat.style = ""
			} else {
				float_chat.style.backgroundColor = '#ecccbd';
				float_chat.style.color = '#1c223e';
			}
		}, 0);
	}
});

Aetae 24.04.2025 00:13

Таймаут это кривой костыль, есть событие transitionend. T.e. что-то типа:
var bodyChat = document.querySelector('.form-body');
$('.float-chat').on('click', function (e) {
  bodyChat.classList.toggle('show');
  $(bodyChat).one('transitionend', function() {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if (float_chat.style.color != "") {
        float_chat.style = ""
      } else {
        float_chat.style.backgroundColor = '#ecccbd';
        float_chat.style.color = '#1c223e';
      }
    }
  })
});

Только не надо мешать ванилу с jquery, пишите в одном стиле, в вание:
const bodyChat = document.querySelector('.form-body');
const floatChat = document.querySelector('.float-chat');

floatChat.addEventListener('click', () => {
  bodyChat.classList.toggle('show');
  bodyChat.addEventListener('transitionend', () => {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if (floatChat.style.color !== "") {
        floatChat.removeAttribute('style');
      } else {
        floatChat.style.backgroundColor = '#ecccbd';
        floatChat.style.color = '#1c223e';
      }
    }
  }, { once: true });
});
или в jquery
var $bodyChat = $('.form-body');
var $floatChat = $('.float-chat');

$floatChat.on('click', function () {
  $bodyChat.toggleClass('show');
  $bodyChat.one('transitionend', function () {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if ($floatChat.css('color') !== '') {
        $floatChat.removeAttr('style');
      } else {
        $floatChat.css({
          backgroundColor: '#ecccbd',
          color: '#1c223e'
        });
      }
    }
  });
});

voraa 24.04.2025 08:42

floatChat.removeAttribute('style');

А что, точно известно, что через style не задано никаких других свойств?

ureech 24.04.2025 09:40

Всё понятно, большое всем спасибо.
Цитата:

Сообщение от voraa
А что, точно известно, что через style не задано никаких других свойств?

Да.
Цитата:

Сообщение от Aetae
Только не надо мешать ванилу с jquery

Есть такой грешок)


Часовой пояс GMT +3, время: 10:07.