Question

我有一个带有 if...else 的函数，如下所示：

function updateInputs(data) {
  from = data.from;
  to = data.to;
  rangeInput = $(data.input);
  
  if (rangeInput.hasClass('rangeSalary')) {
    $inputFromSalary.prop("value", from);
    $inputToSalary.prop("value", to);      
  } else if (rangeInput.hasClass('rangeAge')) {
    $inputFromAge.prop("value", from);
    $inputToAge.prop("value", to);
  }
  
  table.draw();
}

但是我需要添加更多的语句，所以我认为最好使用switch...case，所以我尝试这样做：

function updateInputs(data) {
  from = data.from;
  to = data.to;
  rangeInput = $(data.input).hasClass('rangeSalary');

  switch (rangeInput) {
    case 'rangeSalary':
      $inputFromSalary.prop("value", from);
      $inputToSalary.prop("value", to);
      break;
    case 'rangeAge':
      $inputFromAge.prop("value", from);
      $inputToAge.prop("value", to);
      break;
  }

  table.draw();
}

但是没有用。我错过了什么？

Answer 1

您的代码的问题在于您从 hasClass 获得的结果将是 true 或 false，这两者都不匹配您的任何案例标签。

如果注意到 if/else if 块（或 cases）中的代码中唯一不同的是您在其上调用 prop 的 jQuery 对象.在这种情况下，我倾向于拥有以他们的名字为键的那些人的地图（或对象）。该名称可以来自 name 属性（如果这是一种允许 name 并且有意义的元素），或 data-name 属性（因为您可以将 {{ 1}} 任何元素上的属性）。例如：

data-*

<input data-range="Salary" ... >
<input data-name="rangeFromSalary" ... >
<input data-name="rangeToSalary" ... >
<input data-range="Age" ... >
<input data-name="rangeFromAge" ... >
<input data-name="rangeToAge" ... >

请注意，我为 const rangeInputs = new Map($("[data-name]").map((i, input) => { return [input.getAttribute("data-name"), $(input)]; })); function updateInputs(data) { // Note: You need to declare `from` and `to` const from = data.from; const to = data.to; // Get the name for this input const rangeName = data.input.getAttribute("data-range"); // Get the matching jQuery objects const rangeFrom = rangeInputs.get(`rangeFrom${inputName}`); const rangeTo = rangeInputs.get(`rangeTo${inputName}`); // Got them? if (rangeFrom && rangeTo) { // Set them rangeFrom.prop("value", from); rangeTo.prop("value", to); } table.draw(); } 和 from 添加了声明。没有它们，您的代码就会成为我所说的 The Horror of Implicit Globals 的牺牲品。始终声明您的变量。

在评论中，您似乎担心使用 ES2015+ 功能。以下是仅使用 ES5 及以下功能的上述内容：

to

但如果您真的非常想使用 var rangeInputs = Object.create(null); $("[data-name]").each((i, input) => { rangeInputs[input.getAttribute("data-name")] = $(input); }); function updateInputs(data) { var from = data.from; var to = data.to; // Get the name for this input var rangeName = data.input.getAttribute("data-range"); // Get the matching jQuery objects var rangeFrom = rangeInputs.get(`rangeFrom${inputName}`); var rangeTo = rangeInputs.get(`rangeTo${inputName}`); // Got them? if (rangeFrom && rangeTo) { // Set them rangeFrom.prop("value", from); rangeTo.prop("value", to); } table.draw(); }：

switch

但请注意，现在，您在两处（HTML 和代码）中有名称，而不仅仅是一处（HTML）。这就引出了您在一个地方添加或删除它们而不是另一个地方的情况。

将 if else 更改为 switch case 语句

1 个答案: