Question

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

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

所以，现在我想完成相同的工作，一个有条件地有条件地改变每个列表项背景颜色的ListView。

经过几天的调查和学习，我正在从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 App上的样子：

This is how it looks like on Android App

希望我解释得很好，有人可以帮助我，因为我是JQuery Mobile的初学者（或者我选择JQuery Mobile来做这种网络应用程序时错了...）

Answer 1

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

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

然后在脚本中迭代数据时，根据您的条件将相应的类添加到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>';
});

以下是您更新的 FIDDLE

P.S。一旦开始更改背景色，您可能希望使用此CSS删除默认的jQM文本阴影：

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

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

1 个答案: