Javascript增加一个值 [英] Javascript increment a value

问题描述

我尝试过使它无法正常工作，因此尝试了专家.

我有以下HTML:

<input type="button" value="-" class="minus">
<input type="number" value="20" class="input-text">
<input type="button" value="+" class="plus">

<div class="newprice">
    20
</div>

使用javascript(特定于jQuery，这是可以的)，我需要拥有它，以便当某人单击加号按钮时，.newprice div内的数字将增加20.同样，当他们单击减号按钮时，该数字也会减少了20.

如果他们在.input-text字段上使用向上/向下箭头，也是如此.

或者，如果他们键入一个值而不使用任何按钮，则.input-text div中的数字将相应更改(如果有人键入3，则.input-text的数字将更改为60). /p>

PS:如果更简单，.newprice div可以是一个文本字段.无论如何.

[[将所有内容作为背景，基本上是购物车的一部分，但我试图向用户显示当他们输入数量时，他们将为产品支付多少费用.例如，该产品的价格为20美元，如果他们想要购买3个，则可以立即看到(在添加到购物车中)这将使他们花费60美元.]

我希望我能正确解释.

谢谢.

解决方案

我已经添加了一些计算和html处理基本价格.参见 jsfiddle中的演示

HTML:

Price per item:<input name="basicPrice" value="20" class="input-text">
<br />
<input type="button" value="-" class="minus">
<input name="quantity" id="quantity" type="number" value="1"  class="input-text">
<input type="button" value="+" class="plus">
<br />Money much pay:
<span class="newprice">20</span>

jquery的JS:

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();
    });
});

如果您需要任何支持，请告诉我.

I have tried and failed trying to get this to work so time to ask the experts.

I've got the following HTML:

<input type="button" value="-" class="minus">
<input type="number" value="20" class="input-text">
<input type="button" value="+" class="plus">

<div class="newprice">
    20
</div>

Using javascript (jQuery specific is fine) I need to be able to have it so that when someone clicks the plus button, the number inside the .newprice div gets incremented by 20. Likewise when they hit the minus button the number gets decreased by 20.

Also the same goes for if they use the little up/down arrows on the .input-text field.

Or if they type in a value instead of using any of the buttons, then the number in the .input-text div changes accordingly (if someone typed in 3, the .input-text number would change to 60).

PS: if it's easier the .newprice div can be an text field instead. Whatever works.

[To put this all into context, basically its part of a shopping cart but I am trying to show the user how much they will be paying for the product when they enter a quantity. For example, the product costs $20, and if they want 3 of them they will be able to see straight away (before adding to their cart) that this is going to cost them $60.]

I hope I explained it properly.

Thanks in advance.

解决方案

I already add some calculation and html for handle the basic price. See demo in jsfiddle

HTML:

Price per item:<input name="basicPrice" value="20" class="input-text">
<br />
<input type="button" value="-" class="minus">
<input name="quantity" id="quantity" type="number" value="1"  class="input-text">
<input type="button" value="+" class="plus">
<br />Money much pay:
<span class="newprice">20</span>

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();
    });
});

Let's me know if you need any support.

这篇关于Javascript增加一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！