使用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);
});
});
});
});
谢谢！
答案 0 :(得分：2)
这是我最接近的，但这只会为所有
active添加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之前根据className计算callStatus，然后在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');
});
答案 1 :(得分：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));
});
});
});
它更易读，也更容易调试。
答案 2 :(得分：0)
这是因为您的<table id="tablePrint">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</tbody>
</table> status-card循环嵌套在JSON循环中。因此，每次从JSON数据循环访问对象时，您都要设置已添加到DOM的所有each元素类。
您可以重新构建以在添加之前构建元素时设置类。
status-card