如何用jQuery/JavaScript计算各区域两个字段的乘积？附代码咨询

看起来你当前的代码只计算了最后一个.item区域的面积（tinggi和lebar的乘积），但需求是要处理所有区域的话，我们需要调整逻辑，遍历每个.item元素来逐个计算。下面是具体的优化方案：

核心问题分析 #

你原代码里用$('.item').length拿到总数量，然后只取了最后一个索引对应的字段（tinggi${count}和lebar${count}），所以只有最后一个区域会被计算。要实现每个区域都处理，我们需要用循环遍历所有.item。

优化后的代码（保留你的字段命名规则） #

如果你的输入字段是按tinggi1、tinggi2...lebar1、lebar2这样的命名方式，修改后的代码如下：

$('#hitung').click(function() {
  // 遍历每一个.item区域
  $('.item').each(function(index) {
    // 因为索引从0开始，而你的字段是从1命名的，所以加1
    const itemIndex = index + 1;
    
    // 获取当前区域的tinggi和lebar值，转成数字并处理空输入/非数字情况
    const tinggi = parseFloat($(`.tinggi${itemIndex}`).val()) || 0;
    const lebar = parseFloat($(`#lebar${itemIndex}`).val()) || 0;
    
    // 计算乘积
    const luas = tinggi * lebar;
    console.log(`区域 ${itemIndex} 的面积：${luas}`);
    
    // 你的后续计算逻辑（dayasebar、hasil、harga）也可以放在这里，针对当前区域处理
    const dayasebar = luas / 12.5 * 2;
    const hasil = dayasebar / 2.5;
    const harga = Math.ceil(hasil) * 120000;
    
    // 示例：把结果显示到当前区域的结果容器里（需要你提前在.item里加对应的元素，比如<div class="hasil-harga"></div>）
    $(this).find('.hasil-harga').text(harga.toLocaleString('id-ID'));
  });

  // 你原有的全局逻辑（标题、颜色选择）可以保留在这里
  const title = $('#title-temp').text();
  const color = document.querySelector('input[name="color"]:checked').value;
  const color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML;
  // 继续你的后续逻辑...
});

更健壮的优化方案（不依赖数字后缀） #

如果可以调整HTML结构，建议把每个区域的tinggi和lebar作为.item的子元素，不用依赖数字命名，这样代码更灵活，新增区域也不用修改JS：

示例HTML结构 #

<div class="item">
  <input type="number" class="tinggi" placeholder="Tinggi">
  <input type="number" class="lebar" placeholder="Lebar">
  <div class="hasil-luas">0</div>
  <div class="hasil-harga">0</div>
</div>
<div class="item">
  <!-- 第二个区域的相同结构 -->
</div>

对应的JS代码 #

$('#hitung').click(function() {
  $('.item').each(function() {
    // 用$(this)指代当前遍历的.item，直接查找它内部的输入框
    const $currentItem = $(this);
    const tinggi = parseFloat($currentItem.find('.tinggi').val()) || 0;
    const lebar = parseFloat($currentItem.find('.lebar').val()) || 0;
    
    const luas = tinggi * lebar;
    const dayasebar = luas / 12.5 * 2;
    const hasil = dayasebar / 2.5;
    const harga = Math.ceil(hasil) * 120000;
    
    // 把结果更新到当前区域的显示元素
    $currentItem.find('.hasil-luas').text(luas);
    $currentItem.find('.hasil-harga').text(harga.toLocaleString('id-ID'));
  });

  // 全局逻辑保留...
});

额外优化：实时计算（无需点击按钮） #

如果想要用户输入时自动计算，不需要点击#hitung按钮，可以把逻辑绑定到输入框的input事件上：

$('.tinggi, .lebar').on('input', function() {
  // 找到当前输入框所在的.item
  const $currentItem = $(this).closest('.item');
  const tinggi = parseFloat($currentItem.find('.tinggi').val()) || 0;
  const lebar = parseFloat($currentItem.find('.lebar').val()) || 0;
  
  const luas = tinggi * lebar;
  const dayasebar = luas / 12.5 * 2;
  const hasil = dayasebar / 2.5;
  const harga = Math.ceil(hasil) * 120000;
  
  $currentItem.find('.hasil-luas').text(luas);
  $currentItem.find('.hasil-harga').text(harga.toLocaleString('id-ID'));
});

注意事项 #

• 建议把输入框的类型设为type="number"，限制用户只能输入数字，减少非数字输入的问题
• 用parseFloat()转换输入值为数字，加上|| 0处理空输入或非数字的情况，避免计算出NaN

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