JQuery 移动设备将颜色更改为点击列表视图

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> ) 时，它会更改背景颜色。当再次点击时，它会回到原来的颜色。下面是单击列表项时调用的函数。请注意，只有外线背景被更改为黄色。我需要将整个

背景更改为黄色。

我做错了什么。请参考图片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 移动设备将颜色更改为点击列表视图

JQuery mobile changing color to clicked list view

html

javascript

css

jquery

jquery-mobile