使用jQuery开发POS应用时如何检测重复输入并更新商品计数？

我正在用jQuery库练习JavaScript开发，要做一个POS应用，现在有个功能不知道怎么实现。我想要的效果是：如果输入lays之后再输入一次lays，不需要新增条目，直接把之前已经生成的对应条目改成lays * 2的格式，我完全没思路，现在已经写的代码如下：

原有JS代码：

var billoutput = document.getElementById('inputterminal');
var counter = 1;

$('#bill').click(function() {
  $("#holder").append(" <span style='padding:10px; margin:5px; color:white; background-color:black; border-radius: 10px;'> " + billoutput.value + " </span> ");
});

原有HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>POS Terminal</h1>
<input id="inputterminal" value="" name="" type="text">
<button id="bill">bill</button> <br>
<div style="margin-top: 20px;" id="holder"></div>

实现方案 #

用一个全局对象存储每个商品的累计数量，每次提交先匹配已有条目，匹配到就更新数量，没匹配到再新增条目即可，修改后的完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>POS终端</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>POS终端</h1>
<input id="inputterminal" value="" name="" type="text">
<button id="bill">记账</button> <br>
<div style="margin-top: 20px;" id="holder"></div>

<script>
var billoutput = document.getElementById('inputterminal');
// 存储商品对应计数
var productCount = {};

$('#bill').click(function() {
  var currentProduct = billoutput.value.trim();
  // 空输入直接跳过
  if (!currentProduct) return;
  
  // 查找是否已经有该商品的条目
  var existItem = $(`#holder span[data-product="${currentProduct}"]`);
  
  if (existItem.length) {
    // 存在的话计数+1，更新文本
    productCount[currentProduct]++;
    existItem.text(`${currentProduct} * ${productCount[currentProduct]}`);
  } else {
    // 不存在的话初始化计数，新增条目
    productCount[currentProduct] = 1;
    $("#holder").append(`<span style='padding:10px; margin:5px; color:white; background-color:black; border-radius: 10px;' data-product="${currentProduct}">${currentProduct}</span>`);
  }
  // 清空输入框方便下一次输入
  billoutput.value = '';
});
</script>
</body>
</html>

核心修改点 #

• 新增productCount对象全局存储所有商品的录入次数，不用每次从DOM文本里解析数量，运行效率更高
• 给每个生成的商品span加了data-product自定义属性标注商品名，能快速定位对应商品的DOM节点
• 增加空输入过滤，避免录入无效的空白条目
• 新增逻辑判断：已存在的商品直接更新计数和显示文本，不需要新增DOM节点
• 增加输入框自动清空逻辑，不用手动删除内容再录入下一个商品

内容的提问来源于stack exchange，提问作者MusaYasin