Question

我正在制作一个项目，其中产品价格，数量表单字段和总价。我希望总价等于产品价格和数量表单字段的乘积。我想用jQuery执行此操作。我希望总价应该随着数量的变化而立即改变。

所有PHP和CSS都已应用。

这是我的整个代码！

$('#quantity').on('keyup',function(){
    var tot = $('#price').val() * this.value;
    $('#total').val(tot);
});

<form action="javascript:checkout()" id="theForm">
<div class="contains">
	<div class="head">Ticket cost includes <input id="quantity" class="quantity" type="number" value="1" name="quantity" min="1" max="6" /> persons.</div>
	<div class="facility">Meal <pre>X1</pre></div>
	<div class="facility">All Taxes <pre>X1</pre></div>
	<div class="facility">Whole Event <pre>X1</pre></div>
</div>
<div class="conclude">
	<div class="head">So what? Grab the Event at just $<span id="price" class="price"><?php echo $array['eventFees']; ?></span> per person.</div>
	<div class="pay-btn">Pay $<span id="total" class="total"><?php echo $array['eventFees']; ?></span></div>
</div>
</form>

虽然我使用了明显的jQuery，但我没有得到任何结果。总价仍然保持不变。请进一步指导我。

提前感谢您的帮助。

Answer 1

您需要使用.text或.html来获取/设置范围的内容。它没有将显示它的value属性。还要考虑将值解析为数字以确保正确计算。

＆＃13;

$('#quantity').on('keyup',function(){
    var tot = parseInt($('#price').html()) * parseInt(this.value);
    $('#total').html(tot);
});

＆＃13;

<form action="javascript:checkout()" id="theForm">
<div class="contains">
	<div class="head">Ticket cost includes <input id="quantity" class="quantity" type="number" value="1" name="quantity" min="1" max="6" /> persons.</div>
	<div class="facility">Meal <pre>X1</pre></div>
	<div class="facility">All Taxes <pre>X1</pre></div>
	<div class="facility">Whole Event <pre>X1</pre></div>
</div>
<div class="conclude">
	<div class="head">So what? Grab the Event at just $<span id="price" class="price"><?php echo $array['eventFees']; ?></span> per person.</div>
	<div class="pay-btn">Pay $<span id="total" class="total"><?php echo $array['eventFees']; ?></span></div>
</div>
</form>

＆＃13;

Answer 2

首先，您可以通过在keyup事件处理函数中添加console.log（val）来检查处理程序是否已执行

Answer 3

首先，您使用val（）函数和val（）函数只获取输入或选择标记的值。而不是val（）函数使用html（）或text（）来获取数据。

试试这个：

$('#quantity').on('keyup mouseup', function () {
    var tot = $.trim($('#price').html()) * this.value;
    $('#total').html(tot);
});

使用jQuery / Javascript

3 个答案: