javascript - 根据变量状态更改类别

Question

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

可以在 http://www.sanjosecoder.com/issuetracker/bug-tracker.html 看到一个实例。

我尝试使用 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";

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

4) 最后，转到您的 innerHTML该函数中的代码并修改它，以便显示您的状态的范围如下所示:

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

摘要)

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