带有分层定价的数量输入字段和用于更新输入字段的小计/旺旺按钮

时间:2015-07-20 20:27:40

标签: jquery twitter-bootstrap css3

这是我的第一个端口,请原谅我错过的任何规则。

我遇到了bootstrap微分按钮无法更新输入字段以显示小计/定价/数量的问题。

以下是示例:http://codepen.io/jatyrx/pen/yNxyjX

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

$(function() {
  var tier_prices = [
    { minQty: 1, unitPrice:19.99 },
    { minQty: 2, unitPrice:16.98 },
    { minQty: 6, unitPrice:15.98 }
  ];
$('#user_input').on("change input keyup", function() {
    var qty = +this.value;
    var price;
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
        price = tier_prices[i].unitPrice;
    }
    $('#price_subtotal').text(price * qty);
    $('#price_updated').text(price);
    $('#price_qty').text(qty);
  });
});

任何建议都会有所帮助!

0 个答案:

没有答案