Question

下面是我拼凑在一起的脚本。当我向订单添加或删除项目时，我遇到了总计和总计算更新的问题。如果您使用下面的代码并添加多个项目，这似乎部分有效，但是，在jsfiddle中它根本不起作用...请参阅http://jsfiddle.net/w6kryfLd/

任何提示都表示赞赏。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
    .price {width:60px; text-align:right;}
    .qty {width:40px; text-align:right;}
    .amount {width:80px; text-align:right;}
    a {cursor:pointer; color:#001eff;}
</style>
</head>
<body>

<h2>PRODUCTS</h2>
<p>Instructions: Click on Products below to add to Your Order.</p>
<div class="btnSave" id="item1" onClick="setFld(this.id);upAmt();" style="cursor:pointer">
Product 1... $<span class="price">5.00</span></div>
<div class="btnSave" id="item2" onClick="setFld(this.id);upAmt();" style="cursor:pointer">
Product 2... $<span class="price">10.00</span></div>
<div class="btnSave" id="item3" onClick="setFld(this.id);upAmt();" style="cursor:pointer">
Product 3... $<span class="price">2.95</span></div>
----------------------------------

<div class="searchbox">
<input type="hidden" id="itmName" />
</div>

<div id="order">
<h2>YOUR ORDER</h2>
$<input type="text" id="total" class="total" value="">

</div>
</div>

----------------------------------------------<br>
<a href="#" onclick="upAmt()">update</a>

<script>
//Add new item button
    $(document).ready(function() {
        $('.btnSave').click(function() {
            addItem($('#itmName').val());
        });
    });


//Add item to the list
    function addItem(name) {
    var container = $('#order');

    var html = '<li>'+name+' Qty. <input class="qty" type="text" name="qty" onChange="upAmt()" value="1"> $<span class="amount">0</span> <a>remove</a></li>';
    container.append($(html));
    }

//remove li box from order
    $(function(){
      $(document).on('click','#order a',function(){
        $(this).parent('li').remove();
        return false;
      });
    });

//Copies clicked item to input which is passed to order form
function setFld(clicked_id){
    document.getElementById('itmName').value = document.getElementById(clicked_id).innerHTML;
}

//Calculates item totals and order sum
$(document).ready(function(){

    upAmt();
    $('.qty').change(function() {
        upAmt();
    });
});


function upAmt()
{
    var sum = 0.00;
    $('#order > li').each(function() {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').html();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.amount').html(''+amount);
    });
    //just update the total to sum  
    $('.total').val(sum);
}
</script>
</body>
</html>

Answer 1

我建议放弃“将DOM与事件一起使用以更新DOM的其他部分”的策略。您应该使用JavaScript将产品，购物车和购物车项目表示为对象，然后在这些对象发生更改时更新DOM。

我写了这个我正在谈论的快速例子：

http://codepen.io/dustinpoissant/pen/ramNdN

function formatNumber(n, format){
  if(!format||format.length==0)return n+"";
  var w = Math.floor(n);
  var d = n-w;
  var b = format.indexOf(".");
  var a = ((format.length-b)-1);
  w=w+"";
  while(w.length<b)w="0"+w;
  d=Math.round( d*Math.pow(10,a) )+"";
  while(d.length<a)d+="0";
  return w+"."+d;
};
var Store = {
  products: [],
  addProduct: function(upc, name, price){
    Store.products.push({
      upc: upc,
      name: name,
      price: price
    });
  },
  getProduct: function(upc){
    for(var i=0;i<Store.products.length;i++)
      if(Store.products[i].upc == upc) return Store.products[i];
    return false;
  },
  displayProducts: function(){
    var html = "";
    for(var i=0;i<Store.products.length;i++)
      html += "<button type='button' class='product' onClick='Store.cart.addItem("+Store.products[i].upc+");'>"+Store.products[i].name+": $"+formatNumber(Store.products[i].price, "#.##")+"</button>";
    document.getElementById("products").innerHTML = html;
  },
  cart: {
    items: [],
    addItem: function(upc, qty){
      /* qty's default value is 1 */
      if(qty===undefined)qty=1;
      if( Store.cart.updateItem(upc, qty, true) === false){
        Store.cart.items.push( {
          upc: upc,
          qty: qty
        } );
      }
      Store.cart.toHTML();
    },
    updateItem: function(upc, qty, append){
      var updated = false;
      for(var i=0;i<Store.cart.items.length;i++){
        if(Store.cart.items[i].upc == upc){
          updated = true;
          if(append)
            Store.cart.items[i].qty += qty;
          else{
            Store.cart.items[i].qty = qty;
            Store.cart.toHTML();
          }
        }
      }
      return updated;
    },
    removeItem: function(upc){
      for(var i=0;i<Store.cart.items.length;i++)
        if(Store.cart.items[i].upc == upc) Store.cart.items.splice(i, 1);
      Store.cart.toHTML();
    },
    toHTML: function(){
      var html = "";
      for(var i=0;i<Store.cart.items.length;i++){
        var product = Store.getProduct(Store.cart.items[i].upc);
        html += "<div class='item'><input type='number' class='item-qty' value='"+Store.cart.items[i].qty+"' onChange='Store.cart.updateItem("+product.upc+",this.value);' /> "+product.name+" @ $"+formatNumber(product.price, "#.##")+" each = $"+formatNumber(Store.cart.items[i].qty*product.price,"#.##")+" (<a href='#' class='item-removeBtn' onclick='Store.cart.removeItem("+product.upc+");return false;'>remove</a>)</div>";
      }
      document.getElementById("cart-items").innerHTML = html;
      document.getElementById("total").innerHTML = formatNumber(Store.cart.getTotal(), "#.##");
    },
    getTotal: function(){
      var total = 0;
      for(var i=0;i<Store.cart.items.length;i++){
        var item = Store.cart.items[i];
        var price = 0;
        for(var p=0;p<Store.products.length;p++)
          if(Store.products[p].upc == item.upc)
            total += item.qty*Store.products[p].price;
      }
      return total;
    }
  }
};
Store.addProduct(1, "Teddy Bear", 12.99);
Store.addProduct(2, "Deck of Cards", 4.68);
Store.addProduct(3, "Bar of Soap", 2.95);
Store.addProduct(4, "Magazine", 4.99);
Store.addProduct(5, "Pack of Gum", 2.67);

我认为有可能按照你的方式去做，但我会高度建议不要这样做。如果您愿意，我会修复您的错误并让您的代码正常工作，但这是错误的方法。

Jquery / JS订单 - 在添加或删除最后一项时不会更新

1 个答案: