更改if else以切换case语句

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属性（因为您可以在任何元素上放置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();
}

但如果您真的非常非常想使用开关:

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）。这就会出现这样的情况，即在一个地方添加或删除它们，而不是在另一个地方添加或删除它们。