Подсветка выбранного блока

$(".slot").click(function() { open_slot(); }); function api_call(url, data, callback) { $.ajax({ url: url, data: JSON.stringify(data), cache: false, contentType: 'application/json', type: 'POST', success: function(data) { if (data.success || data.success == "true") { callback(null, data); } else { callback(data.error, null); } } }); } function open_slot() { api_call('api url', {}, function(err, result) { if (err) { console.log(error); } else { if (result.result == 1) { $(".result").html("вы выбрали верно!"); // добавляем блоку на который тыкнули класс "select", и всем остальным класс "block" } else { $(".result").html("вы выбрали не верно!"); // Тут рандомно надо добавить в один из блоков (исключая блок на который мы нажали) class "select", а всем остальным класс "block". Чтобы якобы показать где на самом деле был правильный вариант. } } }); } .slot { display: inline-block; margin-left: 10px; width: 100px; height: 100px; background: #000; } .slot.select { background: green; } .slot.block { background: red; }

В коде все описал

Ответ

Лучшее решение я считаю - использовать коллбек, в котором будет меняться отображение объектов.
К слову, добавил условие $(".slot").hasClass("select") || $(".slot").hasClass("block"), которое проверяет, выбирали ли мы уже объект и если да, то предотвращает выбор еще одного.
Вот так:
$(".slot").click(function() { if ($(".slot").hasClass("select") || $(".slot").hasClass("block")) { return; } let thisEl = $(this); open_slot(function(result) { if (result) { $(".result").html("вы выбрали верно!"); thisEl.addClass("select"); } else { $(".result").html("вы выбрали не верно!"); $(".slot").addClass("block"); let slots = $(".slot").not(thisEl); let random = Math.floor(Math.random() * slots.length); $(slots[random]).addClass("select").removeClass("block"); } }); }); function open_slot(callback) { callback(false); // это надо удалить return; // (костыль для проверки) api_call('api url', {}, function(err, result) { if (err) { console.log(error); } else { callback(result.result); } }); } function api_call(url, data, callback) { $.ajax({ url: url, data: JSON.stringify(data), cache: false, contentType: 'application/json', type: 'POST', success: function(data) { if (data.success || data.success == "true") { callback(null, data); } else { callback(data.error, null); } } }); } .slot { display: inline-block; margin-left: 10px; width: 100px; height: 100px; background: #000; } .slot.select { background: green; } .slot.block { background: red; }