Question

我的HTML结构：

<div class="pricesection">
        <label id="productPrice">
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        </label>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

我的JS代码：

$('#quantity').keyup(function(){
  $('#quantity').each(function () {  
  var qty = $('#quantity').val();
  var price = $('#totalprice').val();
  var total = price * qty;
  });

  $('#totalprice').html(total);
});

我找到了很多不合适的例子。： - （

输入数量项目价格后将自动更新。如果“0”，字母，“空”或取消原价之后必须恢复。

我总是得到“0”值回来！

我非常感谢任何帮助！

Answer 1

   var price = $('#totalprice').val();//this is wrong!!!

获取span的html。不是值

var price = $('#totalprice').text();//this is the correct syntax

所以，你的代码变成了 - ：

  $('#quantity').keyup(function () {
        var qty = $('#quantity').val();
        var price = parseInt($('#totalprice').text()); //or $('#totalprice').html()
        var total = price * qty;
        $('#totalprice').html(total);
    });

Answer 2

试试这个........ HTML

<div class="pricesection">
        <input type="text" id="productPrice"/>
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

............... JS ........

$('#quantity').keyup(function(){
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;

  $('#totalprice').html(total);
});

Answer 3

为什么#quantity上有循环？你不需要那个。请尝试以下代码。

$('#quantity').keyup(function () {
    var qty = $('#quantity').val();
    var price = parseInt($('#totalprice').text());
    var total = price * qty;
    $('#totalprice').html(total);
});

注意parseInt($('#totalprice').text()); .val()不适用于span，因此您必须使用.text()并在int中解析结果

Answer 4

尝试

var $totalprice = $('#totalprice');
var price = parseInt($.trim($totalprice.text()).replace(',', '.'));
$totalprice.data('totalprice', price);
$('#quantity').keyup(function(){
    var qty = this.value;
    var price = $totalprice.data('totalprice');
    var total = price * qty;

    $totalprice.html(total ? total : price);
});

注意：数字格式未完成

Answer 5

您的第一个问题是totalprice是一个范围，因此它没有.val()函数（仅适用于输入），而是使用.text()。

span的内容当前有逗号，不会自动解析为数字。您需要使用parseFloat()，并且需要使用小数点，而不是逗号。

parseFloat("129,50")是129
parseFloat("129.50")为129.50

其次，你对数量字段进行了each，但只有一个。也许你想要将来（在这种情况下你应该使用类而不是ID），但这里有一些JS应该实现你想要的功能并修复你的bug（未经测试）：

$('#quantity').keyup(function(){
    var qty = $('#quantity').val();
    if (qty && qty > 0){
        var price = parseFloat($('#totalprice').text());
        var total = price * qty;
        $('#totalprice').text(total);
    }
    else{
        //Find a better way of restoring this value
        $('#totalprice').text("129.50");
    }
});

希望这会有所帮助。：）

在数量和产品价格的基础上，总价格更新

5 个答案: