Как выполнить действие после добавления класса в jq?

Рейтинг: -1Ответов: 2Опубликовано: 19.08.2023

Всем привет, не могу понять, как выполнить действие, после добавления нового класса к блоку? Я хочу добавить вызов алерта после добавления класса к диву.

PS: у меня класс заливает строку цветом, а алерт вызывается асинхронно и выделение происходит после закрытия алерта, я хочу, чтобы сначала стиль применился, а после вызвался алерт, другими словами наверное сделать синхронное выполнение…

… функция клик по кнопке
$(‘.box’).addClass(‘newClass’)
alert(“ok!”)

То что выше делает сначала алерт, потом заливку..

… пробовал еще так
$(‘.box’).addClass(‘newClass’).done(function(){
alert(“ok!”)})

По аналогии с $(post)… не сработало, начал читать, наткнулся на промисы, объекты ожидания и т.п. не смог разобраться, сделал пару примеров, не получилось…

В общем я почитал про promise, done… но так и не разобрался, ничего не получилось, подскажите как сделать?

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Поместите alert в setTimeout

$(‘.box’).addClass(‘newClass’)
setTimeout(() => alert(“ok!”), 100)
▲ 1

Можно показать свой alert с помощью SweetAlert

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myClass { color: red; }
    </style>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  </head>
  <body>
    <h3 class="box">Class Box</h3>
    <input id="elem" type="button" value="Click">
    <script>
      $('#elem').on('click', function(){
          $('.box').addClass('myClass');
          swal('Success', 'OK', 'success');
      });
    </script>
  </body>
</html>