如何更新html中其他项目的数量？

问题描述 投票：0回答：1

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

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

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) {
    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>
jquery jquery-ui jquery-mobile jquery-plugins
1个回答
0
投票

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

DEMO：

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}
];

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.