使用 for 循环和多个 if else 语句重构函数答案

【问题标题】：Refactor function with for loop and multiple if else statements使用 for 循环和多个 if else 语句重构函数
【发布时间】：2017-09-05 12:20:58
【问题描述】：

我有一个附加到两个不同搜索输入的函数。在我的 for 循环中，我遍历行并根据使用的搜索输入过滤第一列或第三列。在循环中有两个 if 语句感觉不对，我该如何重构它？

// attach keyup event listener to input
document.getElementById("search-rule").addEventListener("keyup", searchVehicle);
 document.getElementById("search-region").addEventListener("keyup", searchVehicle);

var ruleEl = document.getElementById("search-rule");

function searchVehicle(event) {
    // convert input to uppercase
    var filter = event.target.value.toUpperCase();
    // select rows in tbody
    var rows = document.querySelector("#myTable tbody").rows;
    // loop through the rows 
  // if the input searches by rule, search the first column
  // else search the 3rd column (region)
    // if in input show the row, if not in input, hide row
    for (var i = 0; i < rows.length; i++) {
    if (event.target === ruleEl) {
        var colRule = rows[i].cells[0].textContent.toUpperCase();
    } else {
      var colRule = rows[i].cells[2].textContent.toUpperCase();
    }
    if (colRule.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }      
  }
}

【问题讨论】：

为了清楚起见，请提供一个有效的 sn-p 或 JSFiddle。

标签： javascript function if-statement event-handling tablefilter

【解决方案1】：

可以使用三元语句来设置显示属性：

rows[i].style.display = (colRule.indexOf(filter) > -1) ? "" : "none";

我还将在函数顶部声明colRule var，并且只在循环中分配它，而不是重新声明它。

【讨论】：

谢谢你，照顾它！