Javascript 根据JSON数据添加类
使用JSON数据动态生成的HTML，我试图向每个Javascript 根据JSON数据添加类,javascript,jquery,json,Javascript,Jquery,Json,使用JSON数据动态生成的HTML，我试图向每个.status卡添加一个类，在本例中，这取决于c.callStatus的值。这是我得到的最接近的，但这只是将活动类添加到所有状态卡。我猜这与我如何使用$（这个）有关，还是我遗漏了其他东西 $(function() { var agents = []; $.getJSON('js/agents.json', function(a) { $.each(a.agents, function(b, c) {
.status卡添加一个类，在本例中，这取决于c.callStatus
的值。这是我得到的最接近的，但这只是将活动
类添加到所有状态卡
。我猜这与我如何使用$（这个）
有关，还是我遗漏了其他东西
$(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);
});
});
});
});
$（函数（）{
var代理=[]；
$.getJSON（'js/agents.json'，函数（a）{
$。每个（a.代理，功能（b，c）{
变量内容=
'' +
'' +
''+c.name+''的+
“+c.callStatus+”+
''+c.处理时间+''+
'' +
'' +
''
$（content）.appendTo（'左'）；
//根据callStatus添加类
$（'.status card'）。每个（函数（）{
如果（c.callStatus=='On Call'）{
$（this）.removeClass（'idle-away'）.addClass（'active'）；
}否则，如果（c.callStatus=='Idle'）{
$（this）.removeClass（'active away'）.addClass（'idle'）；
}否则{
$（this）.removeClass（'active idle'）.addClass（'away'）；
}
console.log（c.callStatus）；
});
});
});
});
谢谢 这是因为您的状态卡
每个循环都嵌套在JSON循环中。因此，每次从JSON数据循环一个对象时，您都在设置所有已添加到DOM中的状态卡
元素的类
在追加元素之前，可以在构建元素时重新构造以设置类
$.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');
});
$。每个（a.代理，函数（b，c）{
变量内容=
'' +
''+c.name+''的+
“+c.callStatus+”+
''+c.处理时间+''+
'' +
'';
var$statusCard=$（“”）。addClass（“状态卡”）；
.附加（内容）；
$statusCard.addClass（函数（）{
开关（c.callStatus）{
“待命”案件：
返回“活动”；
案例“空闲”：
返回“空闲”；
违约：
返回“离开”；
}
}());
$statusCard.appendTo（“#左”）；
});
这是我得到的最接近的，但这只是将活动
类添加到所有状态卡
发生这种情况的原因是，在添加每个状态卡之后，您正在向迄今为止添加的所有状态卡添加其他类：
$.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');
});
函数getClassNameByStatus（callStatus）{
开关（呼叫状态）{
“待命”案件：
返回“活动”；
案例“空闲”：
返回“空闲”；
违约：
返回“离开”；
}
}
$。每个（a.代理，功能（b，c）{
var className=getClassNameByStatus（c.callStatus）；
var含量=
'' +
..；//HTML的其余部分
$（content）.appendTo（'左'）；
});
您正在调用$（'.status card'）。对于a.agents
列表中的每个agent
。因此，在最后一次迭代中，所有.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));
});
});
});
$（函数（）{
函数createStatusCard（名称、调用状态、处理时间）{
var status_class_map={
“待命”：“有效”，
“空闲”：“空闲”
};
var$content=$（“”）.addClass（“状态卡”）.addClass（函数（）{
返回状态_类_映射[呼叫状态]| |“离开”；
});
$content.html（“”+