Javascript 表格单元格文本不更新文本内容

我有一个基本的停车计算器。它通过在地块上使用来计算所需的空间

我想根据使用情况更新“单位”。例如，咖啡店的单位是杯子，而办公空间是平方英尺愚蠢的例子

这似乎只适用于第一行，然后每一行都被此单元卡住。

同样，如果不从第一行开始，则不会显示单位

基本上，当使用发生变化时，我会在该行中找到类的td。然后更新相应的单元格。如果您需要更多代码，请告诉我

$(".useType").change(function() {

  var use = $('.useType').val();
  var units = $(this).closest('tr').find('.units');
  units.addClass('highlight');

  if (use == "General Office 25000sf") {
    units.text('sf');


  } else if (use == "General Retail") {
    units.text('aisles');


  } else if (use == "Fitness Studio") {
    units.text('weights');


  } else if (use == "Coffee Shop") {
    units.text('cups');


  } else if (use == "Restaurant (no bar)") {
    units.text('plates');


  }


});

我已经做了一个小提琴的例子，下面的链接，你可以看到这一点。要进行测试，请选择第一个表行的用途。然后设置下一个。单位将匹配。然后将第一行更改为其他内容。然后所有单位都将在更改时匹配

此选择器：

var use = $('.useType').val();

正在选择该类的第一个实例。按如下方式适当地确定其范围：

var use = $(this).val();

作为补充说明，最好缓存

$（this）

，因为您不止一次使用它：

let $this = $(this);
let use = $this.val();
let units = $this.closest('tr').find('.units');

给你

最后，如果您只需将值存储在排序查找中，代码就可以大大简化（并且可读性更强）。这还允许您在不添加额外逻辑的情况下更改/删除任何值

$(".useType").change(function() {
  let $this = $(this);
  let lookup = {
  "General Office 25000sf": "sf",
  "General Retail": "aisles",
  "Fitness Studio": "weights",
  "Coffee Shop": "cups",
  "Restaurant (no bar)": "plates"
  };

  $this.closest('tr')
    .find('.units')
    .text(lookup[$this.val()])
    .addClass('highlight');
});

---

这是。

非常感谢你，詹姆斯！我错过了这么简单/明显的一件事。我也很感谢你快速、有帮助和非常好的回复。如果允许，我将接受。@Eric.18请耐心等待一秒钟-发布更新的代码。