根据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

$('.status-card').each()您正在为列表agent中的每个人打电话a.agents。因此，在最终迭代中，所有.status-card元素都将具有最后agent.callStatus评估的类。

我会写这样的东西。

$(function() {                                                                                                                                                                                                                                 
  function createStatusCard(name,callStatus,handlingTime) {                                                                                                                                                                                    
    var status_class_map = {                                                                                                                                                                                                                   
      "On Call" : "active",                                                                                                                                                                                                                    
      "Idle" : "idle"                                                                                                                                                                                                                          
    };                                                                                                                                                                                                                                         
    var $content = $("<div/>").addClass("status-card").addClass(function(){                                                                                                                                                                    
      return status_class_map[callStatus] || "away";                                                                                                                                                                                           
    });                                                                                                                                                                                                                                        
    $content.html('<div class="agent-details">' +                                                                                                                                                                                              
      '<span class="agent-name">' + name + '</span>' +                                                                                                                                                                                         
      '<span class="handling-state">' + callStatus + '</span>' +                                                                                                                                                                               
      '<span class="handling-time">' + handlingTime + '</span>' +                                                                                                                                                                              
      '</div>' +                                                                                                                                                                                                                               
      '<div class="status-indicator"></div>');                                                                                                                                                                                                 
    return $content;                                                                                                                                                                                                                           
  }                                                                                                                                                                                                                                            
  $.getJSON('agents.json', function(a) {                                                                                                                                                                                                       
    $.each(a.agents, function(b, c) {                                                                                                                                                                                                          
      $("#left").append(createStatusCard(c.name,c.callStatus,c.handlingTime));                                                                                                                                                                 
    });                                                                                                                                                                                                                                        
  });                                                                                                                                                                                                                                          
}); 

它更具可读性并且更容易调试。