添加類以附加數據

Question

我正在使用jQuery，並且有一些來自websocket的數據。數據狀態被確認，打開和關閉。

我把數據附加到表

$(".incident-row").append(
     "<tr><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     ); 

我現在想用引導到綠色，灰色或紅色背景類添加到依賴於國家本身的狀態。該課程是正確附加，但覆蓋現有的類與DOM

新類別如何重寫這個，使每個類停留在受影響的行從if語句？

if(incident.data.state === "OPEN"){ 
      $('.incident-row tr').addClass("table-danger"); 
     } 
     else if(incident.data.state === "ACKNOWLEDGED"){ 
      $('.incident-row tr').addClass("table-active"); 
     } 
     else if(incident.data.state === "CLOSED"){ 
      $('.incident-row tr').addClass("table-success"); 
     } 
     else{ 
      return; 
     } 

Answer 1

您的$（'。incident-row tr'）選擇器將選擇所有事件行。

您可以使用包含選擇器。

$('.incident-row tr:contains("OPEN")').addClass("table-danger"); 
$('.incident-row tr:contains("ACKNOWLEDGED")').addClass("table-active"); 
$('.incident-row tr:contains("CLOSED")').addClass("table-success"); 

Answer 2

var className = ""; 
if (incident.data.state === "OPEN") { 
    className = "table-danger"; 
} else if (incident.data.state === "ACKNOWLEDGED") { 
    className = "table-active"; 
} else if (incident.data.state === "CLOSED") { 
    className = "table-success"; 
} else { 

} 

$(".incident-row").append(
     "<tr class=\"" + className + "\"><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     ); 

Answer 3

試試這個簡單的解決方案：

var stateClass = {"OPEN":"table-danger","ACKNOWLEDGED":"table-active","CLOSED":"table-success"}; 

$(".incident-row").append(
     "<tr class=\"" + stateClass[incident.data.state]+ "\"><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     );