【发布时间】：2020-02-04 08:30:50
【问题描述】：
我为购物车编写了代码。对于数量值的每次变化（增加或减少），价格都应该发生变化。我试图以相对于数量的价格降低来实现这一点。我可以更改数量，但无法更改价格字段，因为价格仍然给我console.log 的对象类型。谁能指出我做错了什么？
下面是代码：
product.html
<tr>
<td class="product-thumbnail">
<img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black">Top Up T-Shirt</h2>
</td>
<!-- The price -->
<td>$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">+</button>
</div>
</div>
</td>
<td>
<div class="price"></div>
</td>
<td><a href="#" class="btn btn-primary btn-sm">X</a></td>
</tr>
<tr>
<td class="product-thumbnail">
<img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black ">Polo Shirt</h2>
</td>
<td>$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">+</button>
</div>
</div>
</td>
<td>
<div class="price">8</div>
</td>
<td><a href="#" class="remove btn btn-primary btn-sm">X</a></td>
</tr>
main.js
<script>
$('.js-btn-minus').on('click', function(e)
{
e.preventDefault();
if ( $(this).closest('.input-group').find('.form-control').val() !=0 && $(this).closest('.input-group').find('.form-control').val() >0)
{
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
var va = parseInt($(this).closest('.input-group').find('.form-control').val());
va = (parseInt(va));
this.a = va;
console.log(this.a);
var price = $(this).closest('tr').find('.price');
console.log(price.val(parseInt(this.a)));
}
}
</script>
【问题讨论】：
-
创建 jsfiddle。
-
所以对于前。你有
$49.00。现在如果你点击+，你想把价格提高到$50.00，如果你点击-，你想降低价格。我对吗？或者你想要别的东西？ -
“因为价格仍然为我提供了我 console.log 中的对象类型” - 您没有使用
console.log(price.val(parseInt(this.a)))记录任何实际价格值，您正在记录jQuery 的val()方法的返回值——当然这又是一个 jQuery 对象（因为这是方法链首先起作用的基础。）
标签： javascript jquery html onchange shopping-cart