javascript - 根据 JSON 数据添加类

Question

使用从 JSON 数据动态生成的 HTML，我试图向每个 .status-card 添加一个类，在这种情况下取​​决于 c.callStatus 的值.这是我得到的最接近的，但这只是将 active 类添加到所有 status-card。我猜这与我使用 $(this) 的方式有关，或者我遗漏了其他东西？

$(function() {
    var agents = [];
    $.getJSON('js/agents.json', function(a) {
        $.each(a.agents, function(b, c) {
            var content = 
            '<div class="status-card">' +
            '<div class="agent-details">' +
            '<span class="agent-name">' + c.name + '</span>' +
            '<span class="handling-state">' + c.callStatus + '</span>' +
            '<span class="handling-time">' + c.handlingTime + '</span>' +
            '</div>' +
            '<div class="status-indicator"></div>' +
            '</div>'
            $(content).appendTo('#left');

            //Add class depending on callStatus
            $('.status-card').each(function() {
              if (c.callStatus == 'On Call') {
                $(this).removeClass('idle away').addClass('active');
              } else if (c.callStatus == 'Idle') {
                $(this).removeClass('active away').addClass('idle');
              } else {
                $(this).removeClass('active idle').addClass('away');
              }
              console.log(c.callStatus);
            });
        });

    });

});

谢谢!

Answer 1

This is the closest I got, but this just adds active class to all status-card.

发生这种情况是因为在添加每个 status-card 之后，您正在向到目前为止添加的所有状态卡添加其他类:

$.each(a.agents, function(b, c) {
 ....
    // here you are updating the class for all the cards added till now.
    $('.status-card').each(function() {
     ....
    });
 ....
});

因此，active 类被添加到所有其他卡片，因为它可能是最后一个外循环中的 callStatus。

您可以在创建 HTML 之前根据 callStatus 计算 className，然后在 HTML 中使用该 className，如下所示:

function getClassNameByStatus (callStatus) {
    switch(callStatus){
        case "On Call":
            return "active";
        case "Idle":
            return "idle";
        default:
            return "away";
    }
}

$.each(a.agents, function(b, c) {
    var className = getClassNameByStatus(c.callStatus);
    var content =
        '<div class="status-card' + className + '">' +
        ....; // rest of the HTML
    $(content).appendTo('#left');
});