javascript - JQuery 移动更改颜色以单击 ListView

Question

我有一个 ListView ，其中的数据是从 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

您可以更改列表项中 2 个 anchor 标记的背景色:

$("#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