Javascript增加一个值
我已经尝试过但没有尝试让它工作，所以有时间问专家。
我有以下HTML：
20 使用javascript（特定于jQuery是好的）我需要能够拥有它，以便当有人点击加号按钮时，.newprice div中的数字会增加20.同样当他们点击减号按钮时，数字会减少20 。
如果他们使用.input-text字段上的小上/下箭头也是如此。
或者，如果他们键入值而不是使用任何按钮，则.input-text div中的数字会相应更改（如果有人输入3，则.input-文本编号将更改为60）。
PS：如果它更容易，则.newprice div可以是文本字段。 无论什么有效。
[把这一切都放在上下文中，基本上是购物车的一部分，但我试图向用户显示他们在输入数量时将为产品支付多少费用。 例如，该产品售价20美元，如果他们想要其中3个，他们将能够立即看到（在添加到他们的购物车之前），这将花费他们60美元。
我希望我能正确解释。
提前致谢。
我已经添加了一些计算和html来处理基本价格。 请参阅jsfiddle中的演示
HTML：
Price per item:
Money much pay: 20
JS by jquery：
function calculate(){ var basicPrice = parseInt($(":input[name='basicPrice']").val()); var quantity = parseInt($(":input[name='quantity']").val()); console.log(quantity); var total = basicPrice * quantity; $(".newprice").text(total); } function changeQuantity(num){ $(":input[name='quantity']").val( parseInt($(":input[name='quantity']").val())+num); } $().ready(function(){ calculate(); $(".minus").click(function(){ changeQuantity(-1); calculate(); }); $(".plus").click(function(){ changeQuantity(1); calculate(); }); $(":input[name='quantity']").keyup(function(e){ if (e.keyCode == 38) changeQuantity(1); if (e.keyCode == 40) changeQuantity(-1); calculate(); }); $(":input[name='basicPrice']").keyup(function(e){ calculate(); }); var quantity = document.getElementById("quantity"); quantity.addEventListener("input", function(e) { calculate(); }); });
如果您需要任何支持，请告诉我。
你可以这样做。
// how many to increment each button click var increment = 20; $('.plus, .minus').on('click', function() { // the current total var total = parseInt($('#newprice').text()); // increment the total based on the class total += (this.className == 'plus' ? 1 : -1) * increment; // update the div's total $('#newprice').text(total); // update the input's total $('.input-text').val(total); }); $('.input-text').on('change', function() { // update the div's total $('#newprice').text( $(this).val() ); });
根据评论进行编辑
// how many to increment each button click var increment = 20; $('.plus, .minus').on('click', function() { // the current total var total = parseInt($('#newprice').text()); // increment the total based on the class total += (this.className == 'plus' ? 1 : -1) * increment; // update the div's total $('#newprice').text(total); }); $('.input-text').on('change', function() { // update the div's total $('#newprice').text( $(this).val() ); });
要将数字输入增加20，请像这样添加属性step 。 该属性中的数字表示每次按下向上和向下按钮时该值将增加多少。
你可以做…
var $counter = $('.counter'); $('button').on('click', function(){ var $button = $(this); $counter.text(function(i,val){ return +val + ( $button.hasClass('up') ? 1 : - 1 ); }); });
用这个HTML …
10
对于记录，您肯定应该使用计数器元素的输入。
这是你的纯JS示例，但我相信在IE9以下的任何内容，你必须附加事件监听器。
的jsfiddle
document.getElementById("value-change-dec").addEventListener("click", function() { var value = parseInt(document.getElementById('new-price').value); value=value-20; document.getElementById('new-price').value = value; }); document.getElementById("value-change-inc").addEventListener("click", function() { var value = parseInt(document.getElementById('new-price').value); value=value+20; document.getElementById('new-price').value = value; }); function changeIt() { document.getElementById('new-price').value = document.getElementById('change-price').value*20; } var changer = document.getElementById('change-price'); changer.addEventListener('keydown', changeIt, false); changer.addEventListener('keyup', changeIt, false); changer.addEventListener('click', changeIt, false);