JSONデータに応じてクラスを追加

Question

JSONデータから動的に生成されたHTMLを使用して、.status-cardにクラスを追加しようとしています。この場合はc.callStatusの値によって異なります。これは私が得た最も近いものですが、これはすべてstatus-cardにactiveクラスを追加するだけです。私はそれが私が$(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要素は最後の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));                                         
    });                                                           
    });                                                           
}); 

デバッグがより読みやすく、簡単です。

Answer 2

これは、status-cardeachループがJSONループ内にネストされているためです。したがって、JSONデータからオブジェクトをループするたびに、すでにDOMに追加されている要素のクラスのすべてを設定しています（status-card）。

追加する前に、要素を作成するときにクラスを設定するように再構成することができます。

$.each(a.agents, function(b, c) { 
     var content = 
     '<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>'; 

     var $statusCard = $("<div/>").addClass("status-card"); 
            .append(content); 

     $statusCard.addClass(function(){ 
      switch(c.callStatus){ 
       case "On Call": 
        return "active"; 
       case "Idle": 
        return "idle"; 
       default: 
        return "away"; 
      } 
     }()); 

     $statusCard.appendTo('#left'); 


    }); 

Answer 3

これは私が得た最も近いが、これは単に、すべてのstatus-cardにactiveクラスを追加します。

これは、あなたが今までに追加されたすべてのステータスカードに他のクラスを追加している各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ことを使用することができます：あなたは、あなたのa.agentsリスト内の各agentについて$('.status-card').each()を呼んでいる

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'); 
});