Javascript 基于可变状态更改类

我按照一个基本的JavaScript教程构建了一个问题跟踪器，效果非常好。我已经对它进行了一些定制，希望更改与其状态相关的类/颜色，并且它有两个与之关联的类。我希望状态指示器是绿色的，如果它是打开的，红色的，如果它不是。其默认值始终为绿色。绿色类为

标签成功

，关闭类为

标签危险

一个活生生的例子可以在

我试过使用

document.getElementById（“bg”）.setAttribute（'className'，'lable-label-danger'）并将其放置在循环通过
setStatusClosed
功能中的问题状态的循环下方

我尝试在同一位置使用if语句

function fetchIssues() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;

        issuesList.innerHTML += '<div class="well-sm">'+
                            '<h6 style="color: #979897;">Issue ID: ' + id +          '</h6>'+
                            '<p style="color: #979897;"><i>Status:</i> <span class="label label-success" id="bg">' + status + '</span></p>'+
                            '<p><i style="color: #979897;">Description:</i> ' + desc + '</p>'+
                            '<p><i style="color: #979897;">Severity:</i> <span class="glyphicon glyphicon-fire" style="color:#ff0000;"></span> ' + severity + '</p>'+
                            '<p><i style="color: #979897;">Assigned To:</i> <span></span> ' + assignedTo + '</p>'+

                            '<a href="#" onClick="setStatusClosed(\''+id+'\')" class="btn btn-warning" style="margin-right: 15px;">Close</a>'+
                            '<a href="#" onClick="deleteIssue(\''+id+'\')" class="btn btn-danger">Delete</a>'+
                                '</div>';                               

    }
}

function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id == id) {
            issues[i].status = "Closed";
            if (issues[i].status == "Closed") {
                document.getElementById("bg").setAttribute('className', 'lable label-danger');
            }
        }
    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssues();
}

函数fetchIssues（）{
var issues=JSON.parse（localStorage.getItem（'issues'）；
var issuesList=document.getElementById（'issuesList'）；
issuesList.innerHTML=''；
对于（变量i=0；i'+
“说明：”+desc+“
”+
“严重性：”+严重性+“
”+
“分配给：”+assignedTo+“
”+
''+
''+
'';                               
}
}
功能设置状态关闭（id）{
var issues=JSON.parse（localStorage.getItem（'issues'）；
对于（变量i=0；i

预期结果是，当问题结束时，状态区域中的绿色背景变为红色

实际结果是从不工作到禁用按钮功能。有一次，我让它改变颜色，但失去了它的填充，并禁用了关闭功能

if(issues[i].status == "Closed") {
    document.getElementById("bg").setAttribute('className', 'lable label-danger');
}

不要使用
setAttribute
。使用
classList。添加（“”
和
classList。删除（“”
）

换成

if (issues[i].status == "Closed") {
    var bg = document.getElementById("bg");
    bg.classList.remove("label-success"); // removes success class
    bg.classList.add("label-danger"); // adds danger class
}

编辑：
这是针对这个问题的更具体的解决方案

1）去掉整个
if（发出[i].status==“Closed”）{}
语句

2）导航到
fetchIssues（）
函数

3）在您的
状态
变量下面添加此特定代码行：

var statusColorClass=状态==“打开”？“成功”：“危险”

如果你不明白这个逻辑，请看

4）最后，转到该函数中的
innerHTML
代码并对其进行修改，使显示您状态的范围如下所示：

检查DOM元素的
类列表
属性。它有添加和删除类的简洁方法：
element.classList本身是只读的，尽管您可以使用add（）和remove（）方法对其进行修改。
现在阅读，谢谢Kyre。嗨，Tuner-感谢您的快速响应。我试过你的建议，但对我不起作用。我不得不将关键字“let”改为“var”，以使我的文本编辑器停止警告我语法错误，但我仍在编写旧式JavaScript，而不是使用新的ECMA语法。我想知道这两者的混合是否是导致断开连接的原因？

我尝试将代码直接添加到if（issues[I].id==id）{issues[I].status=“Closed”；嗯……嗯，我想我已经把它们按顺序排列好了？我仔细检查了代码，我有四个开括号和四个闭括号-这是“setStatusClosed”函数。是否有可能我的代码排序错误？查看来源：@ScriptNewbie查看我的更新。严格按照步骤操作。解决方案对我有效。如果它仍然对你无效，请告诉我。这确实解决了问题。我正在阅读你提供的链接中的信息，试图理解逻辑。我有很多关于Java的知识需要学习脚本。非常感谢您对Tuner的帮助，非常感谢。没问题。如果您仍然需要帮助理解，请让我知道。只需将答案标记为正确，这样问题就可以“回答”。