如何用jQuery获取空间类型与面积值计算%Area？blur事件失效求助

我正在把一款收集用户输入并执行大量计算的Google Sheets，转成带关联SQL数据库的网页，用jQuery处理页面上的计算逻辑。我懂SQL，但多年没碰JavaScript，需要入门级帮助。

我做了一个5行的表格，用来记录三种空间类型的平方英尺（SF）：

• Space Type是下拉选择框
• Floor Area是<input type="number">字段（用户输入）
• % Area是计算值（Floor Area ÷ Total Area）

1. 处理数字字段时，是不是应该用$("#floor-area-1").val()/$("#total-area").val()？能不能用.text()方法？
2. 我需要把计算结果填充到DIV的innerHTML里，其他列都是DIV，计算结果要显示在对应列中。
3. 怎么获取Space Type和Floor Area的值，然后计算并显示%Area的结果？
4. 测试下面的代码没触发alert，哪里有问题？

$( "#floor-area-1" ).on( "blur", function() {
   alert( "Handler for `blur` called." );
} );

另外还有个计算需求：kWh Used是Space Type对应的值乘以Floor Area，比如Office对应21 kWh，乘以20000 SF，结果420000 kWh要显示在对应行的kWh Used列里。

我之前用过document.getElementById()，但jQuery语法不一样，需要带示例的参考内容。

<!-- Row 1 -->
<div class="div-table-row">
  <div class="div-table-col"  style="width:15%;">
    <select id="space-type-1" name="space-type-1">
      <option value="Education"> Education </option>
      <option value="Food sales"> Food sales </option>
      <option value="Food service"> Food service </option>
      <option value="Health care"> Health care </option>
      <option value="Inpatient"> Inpatient </option>
      <option value="Outpatient"> Outpatient </option>
      <option value="Lodging"> Lodging </option>
      <option value="Mercantile"> Mercantile </option>
      <option value="Retail-1"> Retail <span style="font-size:8px;">(no mall)</span> </option>
      <option value="Retail-2"> Retail <span style="font-size:8px;">(malls)</span> </option>
      <option value="Office"> Office </option>
      <option value="Public assembly"> Public assembly </option>
      <option value="Public safety"> Public safety </option>
      <option value="Religious worship"> Religious worship </option>
      <option value="Service"> Service </option>
      <option value="Storage"> Storage </option>
      <option value="Warehouse"> Warehouse </option>
      <option value="Other"> Other </option>
      <option value="Vacant"> Vacant </option>
    </select>
  </div>
  <div class="div-table-col div-table-col-disp"  style="width:13%;">
    <input class="input-floor-area" type="number" name="floor-area-1" size="13">
  </div> 
  <div id="kwh-used" class="div-table-col div-table-col-calc"
     style="width:10%;border-right-color: #000;">
  </div>
  <div id="kwh-cost" class="div-table-col div-table-col-calc"  style="width:15%;border-right-color: #000;">
  </div>
</div>

1. .val()和.text()的区别 #

• 对于<input>、<select>这类表单元素，必须用.val()获取/设置值，.text()仅用于操作普通DIV/SPAN等元素的文本内容，表单元素用.text()拿不到正确值。
• 计算时注意：.val()返回字符串，需要转成数字再计算，避免字符串拼接错误，示例：

const floorArea = parseFloat($("#floor-area-1").val()) || 0;
const totalArea = parseFloat($("#total-area").val()) || 0;
const percentage = totalArea > 0 ? (floorArea / totalArea * 100).toFixed(2) : 0;

2. 填充DIV内容的方法 #

用jQuery的.text()或.html()都可以，纯文本结果推荐用.text()更安全：

$("#percentage-area-1").text(percentage + "%");

3. 获取值并计算的示例 #

// 获取下拉框选中值
const spaceType = $("#space-type-1").val();
// 获取输入框面积值（转成数字）
const floorArea = parseFloat($(".input-floor-area[name='floor-area-1']").val()) || 0;

// 定义各空间类型对应的kWh值
const spaceKwhMap = {
  "Office": 21,
  "Education": 18,
  "Food sales": 35,
  // 补充其他类型对应值
};

// 计算kWh Used
const kwhUsed = floorArea * (spaceKwhMap[spaceType] || 0);
// 填充到对应DIV
$("#kwh-used").text(kwhUsed.toLocaleString());

4. blur事件未触发的原因及修复 #

• DOM未加载完成：把代码放在$(document).ready()里，确保DOM加载后再绑定事件：

$(document).ready(function() {
  $("input[name='floor-area-1']").on("blur", function() {
    alert("Handler for `blur` called.");
  });
});

• 元素选择器错误：你的输入框只有name="floor-area-1"，没有id="floor-area-1"，所以要用name选择器而非id选择器。
• jQuery未引入：检查页面是否加载了jQuery库，可在<head>中添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

5. 适配5行的通用计算逻辑 #

避免重复代码，用类选择器和遍历实现：

$(document).ready(function() {
  // 给所有面积输入框绑定输入/失焦事件
  $(".input-floor-area").on("input blur", function() {
    // 获取当前行元素
    const row = $(this).closest(".div-table-row");
    const spaceType = row.find("select").val();
    const floorArea = parseFloat($(this).val()) || 0;
    
    // 计算总面积（所有输入框数值之和）
    let totalArea = 0;
    $(".input-floor-area").each(function() {
      totalArea += parseFloat($(this).val()) || 0;
    });
    
    // 计算并填充% Area
    const percentage = totalArea > 0 ? (floorArea / totalArea * 100).toFixed(2) : 0;
    row.find(".percentage-area").text(percentage + "%");
    
    // 计算并填充kWh Used
    const spaceKwhMap = {
      "Office": 21,
      // 补充其他类型对应值
    };
    const kwhUsed = floorArea * (spaceKwhMap[spaceType] || 0);
    row.find("#kwh-used").text(kwhUsed.toLocaleString());
  });
});

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