根据变量状态更改类别

Question

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

label label-success

，封闭课是

label label-danger

。

我尝试使用

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

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

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

Answer 1

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

不要使用

setAttribute

。使用

classList.add("")

和

classList.remove("")

。

更改为

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(issues[i].status == "Closed"){}

语句。

2) 导航至

fetchIssues()

功能。

3) 在您的

status

变量下添加此特定代码行：

var statusColorClass = status == "Open" ? "success" : "danger";

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

4) 最后，转到该函数中的

innerHTML

代码并修改它，以便显示您的状态的范围如下所示：

<span class="label label-' + statusColorClass + ' id="bg">

.

总结）

由于状态

span

的类别取决于状态并且您在那里有状态值，因此只需添加一个条件即可选择正确的类别。