Javascript：不同div的不同背景颜色答案

【问题标题】：Javascript: Different background color for different div'sJavascript：不同div的不同背景颜色
【发布时间】：2017-06-21 06:18:14
【问题描述】：

我在使用 javascript 应用程序来管理会议时遇到了一些问题。我有三个重要级别：“重要”、“中等”、“不重要”，我想为它们更改背景颜色。 '重要' - 红色，'中等' - 黄色 和 '不重要' - 绿色。我尝试从 html 中保存 content 变量字符串，然后将此值与 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');
    }
}

github

live app

好的，我尝试在 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";
    }

【问题讨论】：

你不能像
这样设置类，然后在你的 CSS 文件中为重要的类设置一个类吗？这样就省了 10 行 JS 和头疼了。
document.getElementsByClassName("importance") 返回一个元素数组，因此您必须遍历它们并为每个元素的父元素添加背景颜色（class=mettingDiv 的 div）。但是，如果您只在渲染时为每种类型的会议添加不同的类，它会更简洁。
试试这个meetingsResults.innerHTML += '<div class="mettingDiv ' + warning + '">'+ 这将导致<div class="mettingDiv Important" ..., <div class="mettingDiv No important" ... 然后添加CSS ` .Important { background-color: #c00100; } .Medium { 背景颜色：#fbff30; } .No.important { 背景颜色：#85ff63; } `
好的，终于成功了。感谢您解决这个问题的好主意，祝大家周末愉快:)