代码之家 › 专栏 › 技术社区 › Jaquarh

当多个产品被移除时,购物车系统正在发出警报。

jquery javascript

Jaquarh · 技术社区 · 5 年前

我正在为我的游戏创建一个商店。其思想是,结帐同时加载到创建产品决策的用户。这样做:

$(document).ready(function() {

  var cart = [];

  $('.inc-btn').click(function() {
    var itemid = $(this).attr('itemid');
    if (cart[itemid] != undefined) {
      cart[itemid] = ++cart[itemid];
    } else {
      cart[itemid] = 1;
    }

    $('#total-' + itemid).text(cart[itemid]);

    updateCheckout(itemid, $(this).attr('cost'), cart[itemid]);

    $.post('/store/cart', {
      cart: itemid,
      quantity: cart[itemid]
    }, function(r) {
      return;
    });
  });

  $('.dinc-btn').click(function() {
    var itemid = $(this).attr('itemid');
    if (cart[itemid] != undefined && cart[itemid] != 0) {
      cart[itemid] = --cart[itemid];
    } else {
      cart[itemid] = 0;
    }

    $('#total-' + itemid).text(cart[itemid]);

    updateCheckout(itemid, $(this).attr('cost'), cart[itemid]);

    $.post('/store/cart', {
      cart: itemid,
      quantity: cart[itemid]
    }, function(r) {
      return;
    });
  });

  checkout = [];

  function updateCheckout(id, cost, quantity) {
    if (quantity != 0) {
      checkout[id] = cost * quantity;
    } else {
      if (checkout[id] != undefined) {
        var i = checkout.indexOf(checkout[id]);
        checkout.splice(i, i);
      }
    }

    $('#checkout').text('');

    var total = 0;

    checkout.forEach(function(k, v) {
      $('#checkout').append('<tr><td>' + v + '</td><td>$' + k.toFixed(2) + '</td></tr>');
      total = k + total;
    });

    $('#total-cost').text(total.toFixed(2));

    /*$.get('/store/stripe/' + total.toFixed(2).replace('.', ''), function(stripe) {
      $('#stripe').html(stripe);
    });*/

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <table class="table table-striped table-dark">
        <thead>

          <tr>
            <th scope="col">#</th>
            <th scope="col">Item ID</th>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
            <th scope="col">Add to Cart</th>
            <th scope="col">Total</th>
          </tr>
        </thead>

        <tbody style="border-top: none;">
          <tr>
            <th scope="row">1</th>
            <td>995</td>
            <td>Gold<img src='https://www.osrsbox.com/osrsbox-db/items-icons/6964.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>1.00</td>
            <td>1000000</td>
            <td>
              <button cost="1.00" itemid='995' class='inc-btn'>+</button> or
              <button cost="1.00" itemid='995' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-995'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">2</th>
            <td>14484</td>
            <td>Dragon Claws<img src='https://www.osrsbox.com/osrsbox-db/items-icons/13652.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>10.00</td>
            <td>1</td>
            <td>
              <button cost="10.00" itemid='14484' class='inc-btn'>+</button> or
              <button cost="10.00" itemid='14484' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-14484'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">3</th>
            <td>20002</td>
            <td>Ragefire Boots<img src='https://vignette.wikia.nocookie.net/runescape2/images/0/0f/Ragefire_boots_detail.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>8.00</td>
            <td>1</td>
            <td>
              <button cost="8.00" itemid='20002' class='inc-btn'>+</button> or
              <button cost="8.00" itemid='20002' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-20002'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">4</th>
            <td>607</td>
            <td>$10 Scroll<img src='https://www.osrsbox.com/osrsbox-db/items-icons/607.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>10.00</td>
            <td>1</td>
            <td>
              <button cost="10.00" itemid='607' class='inc-btn'>+</button> or
              <button cost="10.00" itemid='607' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-607'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">5</th>
            <td>608</td>
            <td>$50 Scroll<img src='https://www.osrsbox.com/osrsbox-db/items-icons/608.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>50.00</td>
            <td>1</td>
            <td>
              <button cost="50.00" itemid='608' class='inc-btn'>+</button> or
              <button cost="50.00" itemid='608' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-608'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">6</th>
            <td>11694</td>
            <td>Armadyl Godsword<img src='https://www.osrsbox.com/osrsbox-db/items-icons/11802.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>8.00</td>
            <td>1</td>
            <td>
              <button cost="8.00" itemid='11694' class='inc-btn'>+</button> or
              <button cost="8.00" itemid='11694' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-11694'>0</span></td>
          </tr>
        </tbody>
        <tbody style="border-top: none;">
          <tr>
            <th scope="row">7</th>
            <td>20555</td>
            <td>Dragon Warhammer<img src='https://www.osrsbox.com/osrsbox-db/items-icons/13576.png' style='max-width: 40px; width: 100%; height: 40px; margin-left: 10%;'></td>
            <td>50.00</td>
            <td>1</td>
            <td>
              <button cost="50.00" itemid='20555' class='inc-btn'>+</button> or
              <button cost="50.00" itemid='20555' class='dinc-btn'>-</button>
            </td>
            <td><span id='total-20555'>0</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-4">
      <h2 style="text-align: center; margin-bottom: 5%;">Cart Summary</h2>
      <p style="text-align: center;">
        Welcome to ExoScape's store, where you can purchase in-game items. Start by telling us your in-game Username so we can add funds.
      </p>
      <table class="table table-striped table-dark">
        <thead>

          <tr>
            <!--<th scope="col">#</th>-->
            <th scope="col">Item ID</th>
            <th scope="col">Total Cost</th>
          </tr>
        </thead>
        <tbody id="checkout" style="border-top: none;">

        </tbody>
      </table>
      $<span id="total-cost">0.00</span>
      <button type "button" id="stripe">Pay btn would be here</button>
    </div>
  </div>
</div>

但是,如果您添加了多个产品(添加所有产品几次),然后将它们全部删除(将所有总数设置为0),那么通用概念会出错,并留下一个我的商店中不存在的项目ID。

我试过调试它,以找出它为什么这样做,但找不到原因。我怎样才能阻止这种事发生?

0 回复 | 直到 5 年前

Jaquarh 5 年前

感谢@david指出了一些如何计算标识符而不是属性的方法。

我重写了使用对象数组的逻辑,使之更简单。现在,这项工作没有意外的行为。

var cart        = [];
var discount    = 0;
var total       = 0;

var incBtn      = $('.inc-btn');
var dincBtn     = $('.dinc-btn');

var checkout    = $('#checkout');
var stripe      = $('#stripe');

var cartSummary = $('#total-cost');

incBtn.click(function() {
    var id      = $(this).attr('itemid');
    var cost    = $(this).attr('cost');

    var item    = cart.filter(function(x) {
        return x.id == id;
    });

    if(item.length > 0) {
        $('#total-' + id).text(++cart[cart.indexOf(item[0])].quantity)
        updateCheckout();
        return;
    }

    cart.push({ id: id, quantity: 1, cost: cost});
    $('#total-' + id).text(cart[cart.length -1].quantity);
    updateCheckout();
});

dincBtn.click(function() {
    var id      = $(this).attr('itemid');

    var item = cart.filter(function(x) {
        return x.id == id;
    });

    if(item.length > 0) {
        if(cart[cart.indexOf(item[0])].quantity > 0) {
            $('#total-' + id).text(--cart[cart.indexOf(item[0])].quantity);
            updateCheckout();
            return;
        }
        $('#total-' + id).text(0);
        updateCheckout();
    }
});

function updateCheckout() {
    checkout.text('');
    total = 0;

    cart.forEach(function(item) {
        checkout.append('<tr><td>' + item.id + '</td><td>$' + (item.quantity * item.cost).toFixed(2) + '</td></tr>');
        total    = (item.quantity * item.cost) + total;
    });

    cartSummary.text(total.toFixed(2));
}