时间戳

首页 > 解决方案 > 在不同的四个 div 中查找单个输入值

javascript - 在不同的四个 div 中查找单个输入值

问题描述

如果我有四个没有类、id 或名称的 div，今天我想计算单个输入值，

那我该怎么办？

<div id="showShoppingCart">
　　<div>
　　　　...
　　　　<input type="text" class="num" name="367303" maxlength="2" value="10">
　　　　<h3>total Quantity is: 10</h3>
　　　　...
　　</div>
　　<div>
　　　　...
　　　　<input type="text" class="num" name="367304" maxlength="2" value="10">
　　　　<input type="text" class="num" name="367305" maxlength="2" value="5">
　　　　<h3>total Quantity is: 15</h3>
　　　　...
　　</div>
　　<div>
　　　　...
　　　　<input type="text" class="num" name="367306" maxlength="2" value="10">
　　　　<h3>total Quantity is: 10</h3>
　　　　...
　　</div>
　　<div>
　　　　...
　　　　<input type="text" class="num" name="367307" maxlength="2" value="20">
　　　　<h3>total Quantity is: 20</h3>
　　　　...
　　</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用来计算输入值，数组numAry是用来存储输入值的，这样会计算所有输入值。

另一个是$('.num').parent().find('input').val()用来获取输入值，但是这种方式也会得到五个不同的输入值，但实际上我只想计算name = 367303值！

那么，我该怎么办？

标签： javascriptjquery

解决方案

重新计算变化

const cart = document.getElementById("showShoppingCart")
const inps = [...document.querySelectorAll("#showShoppingCart inps")];
cart.addEventListener("input", function(e) {
  const tgt = e.target;
  const parent = tgt.closest("div")
  const total = parent.querySelector("h3 span")
  total.innerText = [...parent.querySelectorAll(".num")].map(inp => +inp.value).reduce((a, b) => a + b)
});
// initialise the totals
[...document.querySelectorAll("#showShoppingCart h3 span")].forEach(total => total.innerText = [...total.closest("div").querySelectorAll(".num")].map(inp => +inp.value).reduce((a, b) => a + b))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="showShoppingCart">

  <div>
    <input type="text" class="num" name="367303" maxlength="2" value="10">
    <h3>total Quantity is: <span></span></h3>
    </div>

  <div>
    <input type="text" class="num" name="367304" maxlength="2" value="10">
    <input type="text" class="num" name="367305" maxlength="2" value="5">
    <h3>total Quantity is: <span></span></h3>
    </div>

  <div>
    <input type="text" class="num" name="367306" maxlength="2" value="10">
    <h3>total Quantity is: <span></span></h3>
    </div>

  <div>
    <input type="text" class="num" name="367307" maxlength="2" value="20">
    <h3>total Quantity is: <span></span></h3>
    </div>
</div>

推荐阅读