如果我有四個沒有 class、id 或 name 的 div,而今天我想計算個別的 input value,
那我該怎麼計算比較好?
<div id="showShoppingCart">
<div>
...
<input type="text" class="num" name="367303" maxlength="2" value="10">
...
</div>
<div>
...
<input type="text" class="num" name="367304" maxlength="2" value="10">
<input type="text" class="num" name="367305" maxlength="2" value="5">
...
</div>
<div>
...
<input type="text" class="num" name="367306" maxlength="2" value="10">
...
</div>
<div>
...
<input type="text" class="num" name="367307" maxlength="2" value="20">
...
</div>
</div>
因為我的網站是購物車頁面,可能今天用戶將 name = 367303
的值重新輸入,從 10更改為 5,
更改後,JS會計算出最新的數量和價格,然後顯示在頁面上。
但我的 JS 邏輯是這樣的:
newTotalCount = 0;
numAry = [];
$('.num').each(function(){
newTotalCount += +$(this).val();
numAry.push($(this).val());
});
var newNum = $('.num').parent().find('input').val();
console.log(newNum);
第一種方法是我用 $('.num').each
用來計算輸入值,Array numAry
是用來存 input value 的,這種方式會計算所有 input value。
另一種方法是用 $('.num').parent().find('input').val()
,它用來取得 input value,但是這種方式也會得到五個不同 input 的值,但實際上我只想計算 `name = 367303的值!
不太清楚你要表達的意思
大概猜你是要更改input後單純在屬於那個input的div做計算?
那我會使用 onchange
或者 blur
搭配closet
()做處理
不清楚你想要呈現的功能
但如果是個別找出 input
的值
看你使用的是 jQuery
可以利用 jQuery 的 .change()
API
$(".num").change(function(e) {
const {name, value} = e.target;
console.log(`${name} : ${value}`);
})
不知道是不是你要的效果
Codepen
參考資料 jQuery API