Javascript：不同div的不同背景色'；s

我在使用javascript应用程序管理会议时遇到了一些问题。我有三个重要级别：“重要”、“中等”、“不重要”，我想更改它们的背景色'Important'-红色，'Medium'-黄色和'No-Important'-绿色。我试图保留html中的内容变量字符串，然后将该值与if、else if语句进行比较，但仍然不起作用。你有什么建议吗

main.js

function fetchMeetings(){
    var meetings = JSON.parse(localStorage.getItem('meetings'));
    var meetingsResults = document.getElementById('meetingsResults');

    // Build output
    meetingsResults.innerHTML = '';
    for(var i = 0; i < meetings.length; i++){
        var date = meetings[i].date;
        var person = meetings[i].person;
        var purpose = meetings[i].purpose;
        var warning = meetings[i].warning;

        meetingsResults.innerHTML += '<div class="mettingDiv">'+
            '<h3>'+date+'</h3>'+
            '<h3>'+person+'</h3>' +
            '<h3>'+purpose+'</h3>'+
            '<h3 class="importance">'+warning+'</h3>'+
            ' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
            '</div>';
    }

    var content= document.getElementsByClassName("importance").innerHTML;

    if(content == 'Important'){
        $('.mettingDiv').css('background-color', '#c00100');
    }
    else if(content == 'Medium'){
        $('.mettingDiv').css('background-color', '#fbff30');
    }
    else if(content == 'No important'){
        $('.mettingDiv').css('background-color', '#85ff63');
    }
}

函数fetchMeetings（）{
var meetings=JSON.parse（localStorage.getItem（'meetings'））；
var meetingsResults=document.getElementById（'meetingsResults'）；
//构建输出
meetingsResults.innerHTML=''；
对于（变量i=0；ivar content=document.getElementsByClassName（“重要性”）.innerHTML；
如果（内容==“重要”）{
$（'.mettingDiv'）.css（'background-color'，'c00100'）；
}
否则如果（内容=‘中等’）{
$（'.mettingDiv'）.css（'background-color'，'fbff30'）；
}
else if（内容=‘不重要’）{
$（'.mettingDiv'）.css（'background-color'，'#85ff63'）；
}
}

好的，我尝试向div元素添加其他类名，但类名仍然相同，代码：

meetingsResults.innerHTML += '<div id="div1" class="mettingDiv">'+
            '<h3>'+date+'</h3>'+
            '<h3>'+person+'</h3>' +
            '<h3>'+purpose+'</h3>'+
            '<h3 class="importance">'+warning+'</h3>'+
            ' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
            '</div>';
    }

    var content= document.getElementsByClassName("importance").innerHTML;

    var d = document.getElementById("div1");

    if(content == 'Important'){
        d.className += " important";
    }

meetingsResults.innerHTML+='+
''+日期+''+
''+人+''+
“+目的+”+
''+警告+''+
'  ' +
'';
}
var content=document.getElementsByClassName（“重要性”）.innerHTML；
var d=document.getElementById（“div1”）；
如果（内容==“重要”）{
d、 className+=“重要”；
}

试试这个

 meetingsResults.innerHTML += '<div class="mettingDiv ' + warning + '">'+ ...

---

您是否不能像这样设置类，然后只为CSS文件中的重要内容设置一个类？这将节省10行JS和一个令人头痛的问题。document.getElementsByClassName（“重要性”）返回一个元素数组，因此您必须循环它们并将背景色添加到每个元素的父元素（div with class=mettingDiv）。但是，如果您仅在渲染时为每种类型的会议添加不同的类，则会更干净。请尝试此

meetingsResults.innerHTML+='+

这将导致

Ok，最终可以正常工作。感谢您提出解决此问题的好主意，祝大家周末愉快：）
 .Important { background-color: #c00100; }
 .Medium { background-color: #fbff30; } 
 .No.important { background-color: #85ff63; }