Javascript 为动态生成的div设置不同的颜色

我在页面中有一个功能。 1：编辑语言

1：编辑语言

当页面加载时，在编辑语言部分language div（英语、德语、法语）颜色需要随机设置

英国-蓝色，德国-红色，法国-绿色

如果用户更改排名下拉列表（1到5），请更改语言div颜色

目前，div中的颜色正在变化，但页面加载时不会显示颜色。请检查我的演示和图像

JS

//fake data for this test
var response = {
    availableLanguage: [{
        id: "1",
        language_id: "English",
        title_en: "USEnglish"
    }, {
        id: "2",
        title_en: "Hindi"
    }, {
        id: "3",
        title_en: "Arabi"
    }

    ]
}


var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}


var $languagemodal = $('#languagemodal'); // get the modal and the dialog div
var $dialog = $languagemodal.find('.modal-dialog');

//$languagemodal.modal({show: true}); // just to show the modal for the demo

// get languages
//$.get("/tag/language", function(response){
        var optionLang = '';
        for (var i = 0; i < response.availableLanguage.length; i++) {
            engLangID  = response.availableLanguage[i].id;
            engLang    = response.availableLanguage[i].title_en;
            optionLang += '<option value="'+engLangID+'" data-language="'+engLang+'">'+engLang+'</option>';
        }

// load the modal content div
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm addMore"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>');

// get the modal body we just added
var $modalBody = $dialog.find('.modal-body');

// loop over your data, you would have this in your $.get function 
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    delID = item.id;
    // make the row
    var $newRow = $('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">' + item.title_en + '</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="' + item.id + '" data-item="' + item + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><span class="glyphicon glyphicon-remove removefetchedData" data-removefile="" data-id="'+item.id+'" ></span></div></div>')
    // set the select value
    $newRow.find('select').val(item.ranking);
    // add the row to the modal body
    $modalBody.append($newRow);

});

//remove rank and language of users
                $( ".removefetchedData" ).click(function(e){
                    e.preventDefault();
                    alert($(this).data('id'));
                    /*$.post("/language/delete", {rateUserLangID: userLangDelID}, function(html){
                     //append css design
                     });*/
                });

$(".modal-dialog").on('change', ".addMore", function(){
            var selected = $( this ).find(':selected');
            language       = selected.data('language');
            languageID     = selected.val();
            $( ".appendRow" ).append('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+language+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><span class="glyphicon glyphicon-remove removefile" data-removefile=""></span></div></div>');
        });    

$('.modal-dialog').on('click', '.removefile', function() {
    $(this).closest('.row').remove();
});
$('.form-control').change(function(e){
   var colors=['red','blue','yellow','brown','green']; $(e.target.parentNode).parent('div.row').find('h4').css({"background-color":colors[e.target.selectedIndex],"width" :(parseInt(e.target.options[e.target.selectedIndex].value) * 20) +"%"});
});
 //});// get languages end  

//此测试的假数据
var响应={
可用语言：[{
id:“1”，
语言_id:“英语”，
标题：“使用英语”
}, {
id:“2”，
标题：印地语
}, {
id:“3”，
标题：阿拉伯语
}
]
}
var响应B={
选择LanguageRankingTagid：[{
id:“1”，
用户id:“11”，
语言_id:“英语”，
排名：“2”，
标题：英语
}, {
id:“2”，
用户id:“11”，
语言：“德语”，
排名：“3”，
标题：德语
}, {
id:“3”，
用户id:“11”，
语言：“法语”，
排名：“4”，
标题：法语
}
]
}
var$languageModel=$（'#languageModel'）；//获取模态和对话框div
var$dialog=$languageModel.find（'.modal dialog'）；
//$languageModel.modal（{show:true}）；//只是为了展示演示的模式
//获取语言
//$.get（“/tag/language”，函数（响应）{
var optionLang=“”；
对于（变量i=0；iCloseSave changes”）；
//得到我们刚才添加的模态体
var$modalBody=$dialog.find（'.modalBody'）；
//循环您的数据，您将在$.get函数中使用它
$.each（responseDB.selectLanguageRankingTagId，函数（i，项）{
delID=item.id；
//吵架
变量$newRow=$（''+item.title_en+'12345'）
//设置选择值
$newRow.find（'select'）.val（item.ranking）；
//将该行添加到模态体
$modalBody.append（$newRow）；
});
//删除用户的排名和语言
$（“.removefetchedData”）。单击（函数（e）{
e、 预防默认值（）；
警报（$（this.data（'id'））；
/*$.post（“/language/delete”，{rateUserLangID:userLangDelID}，函数（html）{
//附加css设计
});*/
});
$（.modal dialog”）.on（'change'，.addMore'，function（）{
var selected=$（this.find（':selected'）；
语言=所选。数据（“语言”）；
languageID=selected.val（）；
$（“.appendRow”）.append（“”+language+'12345'）；
});    
$（'.modal dialog'）。在（'单击'，'.removefile'，函数（）上{
$（this）.closest（'.row'）.remove（）；
});
$（'.form control'）.change（函数（e）{
var colors=['red'、'blue'、'yellow'、'brown'、'green']；$（e.target.parentNode）.parent（'div.row'）.find（'h4'）.css（{“background color”：colors[e.target.selectedIndex]，“width”）：（parseInt（e.target.options[e.target.selectedIndex].value）*20）+“%”；
});
//});// 结束

HTML

<div id="languagemodal">
  <div class="modal-dialog" style="margin: 54px 0px;"></div>
</div>

---

也许您可以在

$（文档）中激活您的颜色更改。准备好如下所示：

@sam，你能告诉我什么应该是正确的行为吗？我的意思是页面加载时颜色不显示，因为它起作用了。我们如何制作（animate（））这个动画？如果您有时间，请帮助我确定“（animate（））this”的含义，但也许这个示例可以帮助您开始：它使用jQuery颜色插件。