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的类别取决于状态，并且您在其中具有状态值，因此只需添加条件即可选择正确的类别。

根据变量状态更改类

1 个答案: