更改 if else 以切换 case 语句

Question

I have a function with some 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();
}

But I need to add more statements, so I think it is better to use switch…case, so I tried to do this:

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();
}

But it didn't work. What am I missing?

Answer 1

The problem with your code is that the result you're getting from hasClass will be either true or false , neither of which matches any of your case labels.

If notice that the only thing that's different in the code in the if / else if blocks (or case s) is the jQuery object that you call prop on. That being the case, I would lean toward having a map (or object) of those keyed by their name. The name could be from the name attribute (if this is a type of element that allows name and if it makes sense), or a data-name attribute (since you can put a data-* attribute on any element). For instance:

<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();
}

---

Note that I added declarations for from and to . Without them, your code was falling prey to what I call The Horror of Implicit Globals . Always declare your variables.

---

In a comment you seemed to worry about using ES2015+ features. Here's the above using only ES5 and below features:

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();
}

But if you really, really want to use 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();
}

But notice that now, you have the names in two places (the HTML and the code), not just in one place (the HTML). That invites the case where you add or remove them in one place but not the other.