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

Question

我开发了一个 Android 应用程序，它包含一个由字符串填充的项目的列表视图，它根据单词的巧合改变每个列表行的颜色。

现在我正在尝试为网络开发相同的应用程序。经过调查，我发现最好的方法是使用 JQuery Mobile。

所以，现在我想完成同样的事情，一个有条件地更改每个列表项的 ListView background-color。

经过几天的调查和学习，我从 JSON、like you can see here in JSFiddle 填充列表（这是我到目前为止所取得的成就，基于我发现的另一个 JSFiddle，因为我从来没有用过JQuery手机。）

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

所以，基本上我想要的是改变（如果可能的话）每一行的颜色，这取决于行标题下的单词（或任何其他我可以包含在 JSON 中的变量只会是三个变量）：这是我在 Android 中的内容，只是为了阐明我想要的内容：

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



    }

这就是它在 Android 应用程序上的样子：

希望我解释得很好并且有人可以帮助我，因为我是 JQuery Mobile 的完全初学者（或者我选择 JQuery Mobile 做这种网络应用程序可能是错误的.. .)

Answer 1

您可以为每种背景颜色创建 CSS classes，例如：

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

然后在脚本中迭代数据时，根据您的条件将适当的 class 添加到 LI 中的锚点，例如：

$.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

P.S。一旦你开始改变背景色，你可能想用这个 CSS:

摆脱默认的 jQM 文本阴影

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

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

Change each list item background color conditionally JQuery Mobile

javascript

jquery

listview

jquery-mobile

conditional