Question

我在使用javascript app管理会议时遇到了一些麻烦。我有三个重要级别：＆＃39;重要＆＃39;，＆＃39;媒介＆＃39;＆＃39;没有重要＆＃39;我想为他们改变背景颜色。的＆＃39;重要＆＃39; - 红色，＆＃39;中等＆＃39; - 黄色和＆＃39;没有重要的＆＃39; -green 。我尝试从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');
    }
}

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";
    }

Answer 1

试试这个

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

这将导致<div class="mettingDiv Important" ...，<div class="mettingDiv No important" ...，然后添加CSS

 .Important { background-color: #c00100; }
 .Medium { background-color: #fbff30; } 
 .No.important { background-color: #85ff63; }

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

1 个答案: