set div color when page loads using jquery

时间：2015-11-12 11:32:14

标签： javascript php jquery css

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?

enter image description here

Demo

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>

5 个答案:

答案 0 :(得分：1)

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

Demo

答案 1 :(得分：0)

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

答案 2 :(得分：0)

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>

Demo:http://js.do/code/73185

答案 3 :(得分：0)

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

答案 4 :(得分：0)

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

相关问题
最新问题