更改 if else 以切换 case 语句

Question

我有一个 function 和一些 if…else like this：

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块（或case s）中的代码唯一不同的是您调用prop的 jQuery object 。 在这种情况下，我倾向于拥有一个以他们的名字为键的 map（或对象）。 名称可以来自name属性（如果这是一种允许name并且有意义的元素类型），也可以来自data-name属性（因为您可以将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和to声明。 没有它们，你的代码就会沦为我所说的隐式全局恐怖的牺牲品。 总是声明你的变量。

---

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

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 ：

function updateInputs(data) {
    var from = data.from;
    var to = data.to;
    var rangeFrom, rangeTo;
    switch (data.input.getAttribute("data-range")) {
        case "rangeSalary":
            rangeFrom = $("rangeFromSalary");
            rangeTo = $("rangeToSalary");
            break;
        case "rangeAge":
            rangeFrom = $("rangeFromAge");
            rangeTo = $("rangeToAge");
            break;
        // ...
    }
    if (rangeFrom && rangeTo) {
        rangeFrom.prop("value", from);
        rangeTo.prop("value", to);
    }
  
    table.draw();
}

但请注意，现在您在两个地方（HTML 和代码）有名称，而不仅仅是在一个地方（HTML）。 这会导致您在一个地方添加或删除它们而不是另一个地方。