Как найти кнопку по дата атрибуту и добавить к ней класс в .each()

Question

Всем привет!

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

setInterval(function (){
    let ids = []

    $('.live-event').each(function(){
        ids.push($(this).attr('data-id'));
    })

    $.ajax({
        method: "POST",
        dataType: "json",
        url: "/app/php/ajax.php",
        data: {
            action: "handle_events_buttons",
            eventId: ids
        },
        success(data) {
            
            $.each(data.buttons_info, function(button) {
                $('.live-event button[data-id='+button.event_id+']').removeClass('btn-danger').addClass(button.status)
            })

            //console.log(data)
            //{type: true, event_id: "17", status: "btn-danger", start: -47, finish: 732}
            //ответ есть осталось повесить класс btn-danger

        }
    })
},60000)

Кнопка находится внутри foreach поэтому у каждой кнопки есть data-id="event_id"

<button data-id="'.$event["post_id"].'" class="btn btn-secondary live-event">Прямой эфир</button>

Для примера в расписании 2 мероприятия, одно с неактианой кнопкой т.к оно не началось второе уже активно и надо на кнопку этого ивента повесить класс

//ответ echo json_encode(['buttons_info' => $updated_buttons]);

buttons_info: Array(2)
0: {type: true, event_id: "12", status: "", start: 1440, finish: 1500}
1: {type: true, event_id: "17", status: "btn-danger", start: -59, finish: 720}

Answer 1

На сколько я вижу .live-event и button это один и тот же элемент, а значит запись .live-event button[data-id... не рабочая, т.к. ищет button в элементе с классом .live-event. Скорее всего надо только

$('[data-id='+button.event_id+']')....

либо

$('.live-event[data-id='+button.event_id+']')....

либо

$('button.live-event[data-id='+button.event_id+']')....

Еще у функции jQuery.each в колбэк первым аргументов прилетает индекс элемента, а вторым - значение, поэтому нужно писать $.each(data, function(index, button), а не $.each(data, function(button)

let data = [
    {type: true, event_id: "12", status: "btn-success", start: 1440, finish: 1500},
    {type: true, event_id: "17", status: "btn-danger", start: -59, finish: 720}
];

$.each(data, function(index, button) {
    console.log(button.status);
    $('button.live-event[data-id='+button.event_id+']').removeClass('btn-danger').addClass(button.status);
})

.btn-danger {
    background: red;
}

.btn-success {
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button data-id="12" class="btn btn-secondary live-event">Прямой эфир</button>
<button data-id="17" class="btn btn-secondary live-event">Прямой эфир</button>

БЛОГ НА HUSL

Как найти кнопку по дата атрибуту и добавить к ней класс в .each()

Ответы (1 шт):