Question

我有一个列表视图，其中的数据是从JSON字符串加载的。请参阅以下代码。它将显示项目名称和数量。

function loadItemsForList2(){
    //load items in page for list 2
    //empty existing items from shoppinglist2
    $("#shoppingList2").empty();
    //regenerate listTwoItems
    var lstTwo = localStorage.getItem("listTwo");
    if (lstTwo!=null) listTwoItems = JSON.parse(lstTwo);

        for (var key in listTwoItems) {
            item2 = key; //+ ":" +  listTwoItems[key];
            item2Qty = listTwoItems[key];
        $('#shoppingList2').append('<li class="list"><a class="itemList2"><div><span class="itemInList">' + item2 + '</span><span class="itemInListQty">'+ item2Qty+'</span></div></a><a class="removalLst2"></a></li>');
        }
    //goto to the page
    $.mobile.changePage("#finalShoppingList2");
    $("#shoppingList2").listview('refresh');

}

我希望当用户点击列表中的项目（li＆gt;）时，它会更改背景颜色。当再次重新点击时，它将变为原始颜色。下面是单击列表项时调用的函数。请注意，只有外线背景更改为黄色。我需要将整个

背景改为黄色。

我做错了什么。请参考图片List view showing yellow line background 请问我该如何解决这个问题

$("#shoppingList2").delegate(".itemList2", "click", function() {

        selectedItem = $(this).text();
        //alert(selectedItem);
        selectedItem = selectedItem.replace(/\d+/g, '');
        alert(selectedItem);
        $(this).parent().css("background-color", "yellow");

});

Answer 1

您正在更改.itemList2的父级li的背景颜色。但li包含锚标记和div标记。因此，请更改div tag的背景颜色。

Answer 2

您可以更改列表项中的2个锚标记的背景颜色：

$("#shoppingList2").on("click", ".itemList2", function() {
    selectedItem = $(this).text();
    selectedItem = selectedItem.replace(/\d+/g, '');
    $(this).css("background-color", "yellow");
    $(this).next("a").css("background-color", "yellow");    
});

<强> DEMO

JQuery移动改变颜色到点击列表视图

2 个答案: