有条件地更改每个列表项的背景色JQuery Mobile

Question

I have developed an Android app, which consists in a listview of items populated from strings, which changes the color of each list row depending on a word coincidence.

Now i'm trying to develop same app, for the web. After being investigating, the best way I did found, was using JQuery Mobile.

So, now I want to accomplish the same, a ListView that conditionally changes each list item background-color conditionally.

After several days investigating and learning, I'm populating the list from a JSON, like you can see here in JSFiddle (This is what I've achieved until now, based on another JSFiddle I did found, because I had never used JQuery Mobile.)

//JSON goes above here

$(document).on("pageinit", "#info-page", function () { 
//set up string for adding <li/>
var li = "";
//container for $li to be added
$.each(info, function (i, name) {
    //add the <li> to "li" variable
    //note the use of += in the variable
    //meaning I'm adding to the existing data. not replacing it.
    //store index value in array as id of the <a> tag
    li += '<li><a href="#" id="' + i + '" class="info-go">' + name.Número + '<p>' + name.Origen + '</p></a></li>';'</a></li>';
});
//append list to ul
$("#prof-list").append(li).promise().done(function () {
    //wait for append to finish - thats why you use a promise()
    //done() will run after append is done
    //add the click event for the redirection to happen to #details-page
    $(this).on("click", ".info-go", function (e) {
        e.preventDefault();
        //store the information in the next page's data
        $("#details-page").data("info", info[this.id]);
        //change the page # to second page. 
        //Now the URL in the address bar will read index.html#details-page
        //where #details-page is the "id" of the second page
        //we're gonna redirect to that now using changePage() method
        $.mobile.changePage("#details-page");
    });

    //refresh list to enhance its styling.
    $(this).listview("refresh");
});
});

//use pagebeforeshow
//DONT USE PAGEINIT! 
//the reason is you want this to happen every single time
//pageinit will happen only once
$(document).on("pagebeforeshow", "#details-page", function () {
    //get from data - you put this here when the "a" wa clicked in the previous page
    var info = $(this).data("info");
    //string to put HTML in
    var info_view = "";
    //use for..in to iterate through object
    for (var key in info) {
        //Im using grid layout here.
        //use any kind of layout you want.
        //key is the key of the property in the object 
        //if obj = {name: 'k'}
        //key = name, value = k
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }
    //add this to html
    $(this).find("[data-role=content]").html(info_view);
});

So, basically what I want is to change (if it is possible) the colour of each row, depending of the of the word under the row title (or any other variable I could include in the JSON, would only be three variables): This is what i have in Android, just to clarify what I want:

if (additiveslist.get(position).getOrigen().equals("Vegano")) {
        holder.relativeLayout.setBackgroundColor(0xB790D55D);
            }

    if (additiveslist.get(position).getOrigen().equals("Dudoso")) {
        holder.relativeLayout.setBackgroundColor(0x96F6B22D);
    }
    if (additiveslist.get(position).getOrigen().equals("No vegano")) {
        holder.relativeLayout.setBackgroundColor(0x84f51000);



    }

And this is how it looks like on Android App:

Hope I explained well and someone can help me, because I am a complete beginner in JQuery Mobile (or maybe I did wrong choosing JQuery Mobile to do this kind of web app...)

Answer 1

You can create CSS classes for each of the background colors eg:

.vegano {
    background-color: #ABDD87 !important;    
}
.dudoso {
    background-color: #F5CB98 !important;
}
.novegano {
    background-color: #F47D75 !important;
}

Then in the script when you are iterating the data, add the appropriate class to the anchor within the LI based on your criteria, eg:

$.each(info, function (i, name) {
    //add the <li> to "li" variable
    //note the use of += in the variable
    //meaning I'm adding to the existing data. not replacing it.
    //store index value in array as id of the <a> tag        
    var bColor = "vegano";
    if (name.Origen == "Dudoso") {
        bColor = "dudoso";
    } else if (name.Origen == "No vegano") {
        bColor = "novegano";
    }
    li += '<li><a href="#" id="' + i + '" class="info-go ' + bColor + '">' + name.Número + '<p>' + name.Origen + '</p></a></li>';'</a></li>';
});

Here is your updated FIDDLE

PS Once you start changing the backcolor, you might want to get rid of the default jQM text shadows with this CSS:

#prof-list li a{
    text-shadow: none;
}