jQuery Mobile將顏色更改為單擊列表視圖

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>）時，它會更改背景顏色。 當再次單擊它時，它將恢復為原始顏色。 下面是單擊列表項時調用的函數。 請注意，只有外線背景被更改為黃色。 我需要換個整體

黃色的背景。

我做錯了。 請參考圖片顯示黃線背景的列表視圖，請問如何解決此問題

 $("#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里面包含了anchor標簽和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");    
});

演示