其他物品怎么练拳？ [私人]

Question

所以我可以为列表中的所有项目添加数量并且所有数量都可以在数组中更新，但是，我似乎无法更新 html 中的数量并且它只更新列表的第一项，有人可以帮我解决这个问题吗？

这是我的脚本和第 3 页的 html 代码。

var arr = [{
    img: 'umbrella.png',
    item: 'Umbrella',
    price: '',
    value: 1,
    qty: 0
  },
  {
    img: 'lipbalm.png',
    item: 'Lip Balm',
    price: '',
    value: 2,
    qty: 0
  },
  {
    img: 'flu.png',
    item: 'Flu Medication',
    price: '',
    value: 3,
    qty: 0
  },
  {
    img: 'glucose.png',
    item: 'Glucose Sweets',
    price: '',
    value: 4,
    qty: 0
  }
];
var globalIndex = 0;

function populateList() {
  console.log('populateList');

  var s = "";
  $.each(arr, function(index, val) {
    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 = s + "<li><a href='#'><img src='images/" + img + "'><h3>" + item + "</h3><p>" + price + "</p>" + "<p id='qty'>Qty: " + qty + "</p></a><a href='#' id='addQtyBtn' class='addQtyBtn'></a></li>";
  });
  $("#myList").html(s);
  $('#myList').listview('refresh');
}

$(document).on("pagecreate", "#page3", function() {
  populateList();

  $('#myList li').on('tap', function() {
    var index = $(this).index();
    globalIndex = index;
    console.log('list item was tapped' + index);

    if ($('#addQtyBtn').hasClass('addQtyBtn')) {
      var newQty = arr[globalIndex].qty;
      newQty += 1;
      console.log(newQty);

      //update in array
      arr[globalIndex].qty = newQty;

      console.log(arr);

      $('#qty').html("Qty: " + newQty);
    } else {
      return false;
      console.log('error');
    };

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" type="text/css" rel="stylesheet" />
  <link href="themes/jquery.mobile.icons.min.css" type="text/css" rel="stylesheet" />
  <link href="themes/CA1_Theme.min.css" type="text/css" rel="stylesheet" />

  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">

    <ul id='myList' data-role='listview' data-split-icon="plus"></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>

Answer 1

您不需要 globalIndex，您甚至不需要为您的列表项分配一个唯一的 id。您可以使用自定义数据属性并将您的数据存储在列表项本身中。这样，您的数据直接绑定到每个列表视图项，您可以随时在单击列表视图项时检索它。

演示：

var arr = [
  {img: 'umbrella.png', item: 'Umbrella', price: '', value: 1, qty: 0},
  {img: 'lipbalm.png', item: 'Lip Balm', price: '', value: 2, qty: 0},
  {img: 'flu.png', item: 'Flu Medication', price: '', value: 3, qty: 0},
  {img: 'glucose.png', item: 'Glucose Sweets', price: '', value: 4, qty: 0}
];

function populateList() {
  var s = '';
  $.each(arr, function (index, item) {
    s += '<li data-icon="false" data-value="' + item.value + '" data-index="' + index + '">';
    s +=   '<a href="#">';
    s +=     '<h3>' + item.item + '</h3>';
    s +=     '<p>' + item.price + '</p>';
    s +=     '<p class="qty">Qty: ' + item.qty + '</p>';
    s +=   '</a>';
    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>';
    s += '</li>';
  });
  $("#myList").html(s).listview("refresh");
}

$(document).on("pagecreate", "#page3", function() {
  populateList();

  $('#myList a.ui-icon-plus').on('vclick', function() {
    // go up to find the parent list item
    var listViewItem = $(this).closest("li"),
        index = parseInt(listViewItem.data("index"));
    // update in array
    arr[index].qty += 1;
    // update in listview
    listViewItem.find(".qty").text("Qty: " + arr[index].qty);
    return false;
  })
  
  $('#myList a.ui-icon-minus').on('vclick', function() {
    var listViewItem = $(this).closest("li"),
        index = parseInt(listViewItem.data("index"));
    if(arr[index].qty > 0) {
      arr[index].qty -= 1;
      listViewItem.find(".qty").text("Qty: " + arr[index].qty);
    }
    return false;
  })
  
});

#myList > li > a {
  margin-right: 3em !important;
}

.split-custom-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.split-custom-button {
  position: relative;
  box-sizing: border-box;
  height: 50% !important;
  margin: 0 !important;
  min-width: 3em !important;
}

#checkoutBtn {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}

/* Remove JQM blue halo */
.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Speed-up some android & iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

  <div data-role="page" id="page3">
    <div data-role="main" class="ui-content">
      <ul id="myList" data-role="listview"></ul>
      <br>
      <a id="checkoutBtn" class="ui-btn ui-corner-all" href="#page4" data-transition="flip">Checkout</a>
    </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>
</body>
</html>

其他物品怎么练拳？ [私人]

how to do quan for other items? [priv]

jquery

jquery-ui

jquery-plugins

jquery-mobile