所以我的问题是，我现在可以添加和更新数组中的数量，但是，它似乎没有在html中更新，它只会在第一个li子对象的html中更新。我想要这样，当我单击润唇膏的+按钮时，它将更新html中列表项润唇膏的数量。
另一个错误是，当我已经单击+ 2次时，它将更新数组中伞的数量为2。但是，当我单击“ +”作为润唇膏时，雨伞的数量将变为3。
而且，我也无法单击-号将数量减少1。
var arr = [{
img: 'umbrella.png',
item: 'Umbrella',
price: '10',
value: 1,
qty: 0
},
{
img: 'lipbalm.png',
item: 'Lip Balm',
price: '5',
value: 2,
qty: 0
},
{
img: 'flu.png',
item: 'Flu Medication',
price: '5',
value: 3,
qty: 0
},
{
img: 'glucose.png',
item: 'Glucose Sweets',
price: '1',
value: 4,
qty: 0
}
];
var globalIndex = 0;
function populateList() {
console.log('populateList');
var s = "";
$.each(arr, function(index, val) { //$.each loop through the items u wanna loop through, in this case it's looping through the array
console.log("index:" + index);
var img = arr[index].img;
var item = arr[index].item;
var price = arr[index].price;
// var value = arr[index].value;
var qty = arr[index].qty;
s += "<li data-icon='false' data-value='" + arr[index].value + "'>";
s += "<img src='images/" + img + "'>";
s += "<h3>" + item + "</h3>";
s += "<p>" + price + "<p>";
s += "<p id='qty'>Qty: " + qty + "</p>";
s += "<div class='split-custom-wrapper'>";
s += "<a href='#' class='ui-btn ui-icon-plus ui-btn-icon-notext split-custom-button'></a>";
s += "<a href='#' class='ui-btn ui-icon-minus ui-btn-icon-notext split-custom-button'></a>";
s += "</div></li>"
// s = s + "<li><img id='myListImg' src='images/" + img + "'><h3 id='myListItem'>" + item + "</h3><p id='myListPrice'>" + "$" + price + "</p>" + "<p id='qty'>Qty: " + qty +
// "</p><button id='addQtyBtn' class='addQtyBtn'>+</button></li>"
// <div class='split-custom-wrapper'><a href='#'' class='ui-btn ui-icon-plus ui-btn-icon-notext split-custom-button'><a href='#'' class='ui-btn ui-icon-minus ui-btn-icon-notext split-custom-button'></a></div>
});
$("#myList").html(s);
$('#myList').listview('refresh');
}
$(document).on("pagecreate", "#page3", function() {
populateList();
$('#myList a.ui-icon-plus').on('tap', function() {
var newQty = arr[globalIndex].qty;
newQty += 1;
console.log(newQty);
//update in array
arr[globalIndex].qty = newQty;
console.log(arr);
$('#qty').html("Qty: " + newQty);
});
$('#myList a.ui-icon-minus').on('tap', function() {
var newQty = arr[globalIndex].qty;
if (arr[globalIndex].qty > 0) {
newQty += -1;
} else {
return false;
}
console.log(newQty);
//update in array
arr[globalIndex].qty = newQty;
console.log(arr);
$('#qty').html("Qty: " + newQty);
});
$('#myList li').on('tap', function() {
var index = $(this).index();
globalIndex = index;
console.log('list item was tapped' + index);
});
});<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD7WcthdB_FxP0wUX1rRgJCDHiw2IpqUz0"></script>
</head>
<div data-role="page" id="page3">
<div data-role="header">
<a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all ui-btn-icon-notext"></a>
<h1>Find Me</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left ui-corner-all">Search</a>
</div>
<div data-role="main" class="ui-content">
<ul id='myList' data-role='listview' data-split-icon="plus" data-filter="true"></ul>
<div data-role="content" class="ui-content">
<button id="checkoutBtn" class="ui-btn ui-corner-all" style="width: 70%; margin-left: auto; margin-right: auto;">
<a href="#page4" data-transition="flip">Checkout</a>
</button>
<!-- <button id="checkoutBtn" class="ui-btn ui-corner-all">Checkout</button> -->
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-top">Home</a></li>
<li><a href="#page2" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 2</a></li>
<li><a href="#page3" class="ui-btn ui-icon-info ui-btn-icon-top">Page 3</a></li>
<li><a href="#page4" class="ui-btn ui-icon-location ui-btn-icon-top">Page 4</a></li>
<li><a href="#page5" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 5</a></li>
</ul>
</div>
</div>
</div>
</html>似乎有多个具有ID Qty的元素，我将Qty更改为一个类。
如果仍然决定将其保留为ID，则必须选择所单击元素的相对Qty，并替换：
$('#qty').html("Qty: " + newQty);
with
$(this).find('#Qty').html("Qty: " + newQty);
[关于第二个问题，因为globalIndex保持恒定在0，所以它必须根据所选元素而改变，我会向data-id添加一个.split-custom-wrapper属性，如下所示：
`<div class='split-custom-wrapper' data-id="${index}">`
然后，在每个事件处理程序（minus和plus按钮）上，只需将globalIndex设置为该index：
globalIndex = $(this).parent().attr('data-id')
全部完成，这还将解决您的第三个问题。