使用jquery加载页面时设置div颜色
Please check my attached image. In this image three rows are showing. These three row values (language name) are getting from database. Each language has different ranking. I need to show color variation in each div In my table. I have a ranking field it's value is 1 to 5. Please check my demo also. I have getting ranking values from table rankingColor = item.ranking; How can I add colors for each div using ranking values?
js
//Dummy data for this test
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"
}
]
}
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
rankingColor = item.ranking;
// add the row to the user-language-data div
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
$( ".hideDefaultUserLanguage" ).hide();
});
HTML
<div id="hidedefaultlanguage" class="loadDefaultUserLanguage">
<div class="col-md-8 hideDefaultUserLanguage" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;">
<div style="color: darkgrey;" class="text-left col-md-6">Select a language</div>
<div class="glyphicon glyphicon-pencil text-right col-md-6"></div>
</div>
</div>
Try this...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="hidedefaultlanguage" class="loadDefaultUserLanguage">
<div class="col-md-8 hideDefaultUserLanguage" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;">
<div style="color: darkgrey;" class="text-left col-md-6">Select a language</div>
<div class="glyphicon glyphicon-pencil text-right col-md-6"></div>
</div>
</div>
<script>
//Dummy data for this test
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"
}
]
}
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
rankingColor = item.ranking;
if(item.title_en=="English")
{
var color="blue";
}
if(item.title_en=="German")
{
var color="red";
}
if(item.title_en=="French")
{
var color="green";
}
// add the row to the user-language-data div
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; "><div style="color: darkgrey;background-color:'+color+';height: 40px;width:'+rankingColor+'%;" class="text-left col-md-6">'+item.title_en+'</div></div>');
$( ".hideDefaultUserLanguage" ).hide();
});
</script>
I hope this is what you need :)
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
rankingColor = item.ranking;
color = '';
if(rankingColor == 2){
color = 'green';
}
if(rankingColor == 3){
color = 'red';
}
if(rankingColor == 4){
color = 'blue';
}
// add the row to the user-language-data div
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: '+color+'; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
$( ".hideDefaultUserLanguage" ).hide();
});
I edited your fiddle
You should use a HTML class which represents the rank to do this, and then apply CSS accordingly. Also, you should also be using classes/CSS for applying style.
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8 ranking" id="del-user-language_' + item.id + '"><div class="text-left col-md-6 ranking-'+rankingColor+'">'+item.title_en+'</div></div>');
And for the <style>:
.ranking {
background-color: lightgrey;
border-radius: 10px;
background-repeat: repeat;
height: 40px;
margin:5px 0px;
padding-top:10px;
}
.ranking-2 {
background-color: blue;
}
.ranking-3 {
background-color: red;
}
.ranking-4 {
background-color: green;
}
Instead of using multiple If condition use single Conditional Operator.
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
rankingColor = item.ranking;
color = '';
// add the row to the user-language-data div
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '"
style="background-color: '+ ((item.title_en=="English") ? 'blue' : ((item.title_en=="German") ? 'red' : 'green')) +'; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px; padding-top:10px;"><div style="color: darkgrey;" class="text-left col-md-6">'+item.title_en+'</div></div>');
$( ".hideDefaultUserLanguage" ).hide();
});
updated jsfield
sorry. Now try this.
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
rankingColor = (item.ranking) * 20;
// add the row to the user-language-data div
$( ".loadDefaultUserLanguage" ).append('<div class="col-md-8" id="del-user-language_' + item.id + '" style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 40px; margin:5px 0px;"><div style="color: darkgrey;background-color:'+ ((item.title_en=="English") ? 'blue' : ((item.title_en=="German") ? 'red' : 'green')) +';height: 40px;width:'+ rankingColor +'%;" class="text-left col-md-6">'+item.title_en+'</div></div>');
$( ".hideDefaultUserLanguage" ).hide();
});
updated jsfield