Question

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

我想更新＆＃34;单位＆＃34;根据用途。例如，咖啡店单位是杯子，而办公室空间是sf（平方英尺）。 - 愚蠢的例子。

这似乎只适用于第一行，然后每一行都停留在此单元上。

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

基本上当使用被更改时，我会在该行中找到该类的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');


  }


});

我做了一个小提琴示例，链接如下，您可以看到这一点。要进行测试，请选择第一个表行的用法。然后设置下一个。单位将匹配。然后将第一行更改为不同的行。然后所有单位将在更改时匹配。

fiddle

Answer 1

这个选择器：

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

选择该类的第一个实例。正确地将其范围如下：

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

作为旁注，最好缓存$(this)，因为您不止一次使用它：

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

这是a working fiddle。

最后，如果您只是将值存储在各种查找中，那么您的代码可以大大简化（并且更具可读性）。这也允许您在不添加额外逻辑的情况下更改/删除任何值。

$(".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');
});

这是a working fiddle。

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

1 个答案: