时间戳

首页 > 解决方案 > Switch 语句不作为函数运行

javascript - Switch 语句不作为函数运行

问题描述

我正在尝试创建一个 switch 语句来过滤表上过滤器的所有潜在选项，但是当我在搜索栏中键入任何内容时，它无法识别这些情况。我不能对过滤器使用 if...else 语句，因为我需要过滤器一起运行，而不是一个而不是另一个。我尝试更改变量的名称，以更清楚地表明我为每列指定一个 var 但没有这样的运气。任何见解将不胜感激！

var Caps = event.target.value.toUpperCase();
var Hyphen = event.target.value.replace(/[-]/g, "");
var rows = document.querySelector("#Catalogue").rows;
var firstCol = rows[i].cells[0].textContent.replace(/[-]/g, '');
var thirdCol = rows[i].cells[2].textContent.replace(/[-]/g, '');
var ColOne =  rows[i].cells[0].textContent.toUpperCase();
var ColThree = rows[i].cells[2].textContent.toUpperCase();

function filterTable(event) {

for (var i = 1; i < rows.length; i++) 
{if
(switch(true){

    case (ColThree.indexOf(Caps) > -1 || thirdCol.indexOf(Hyphen) > -1):
        rows[i].style.display = ""
        break;
    case (ColOne.indexOf(Caps) > -1 || firstCol.indexOf(Hyphen) > -1):
        rows[i].style.display = "";
        break;
    case (ColOne.indexOf(Caps) > -1 && firstCol.indexOf(Hyphen) > -1):
        rows[i].style.display = "";
        break;
    case (ColThree.indexOf(Caps) > -1 && thirdCol.indexOf(Hyphen) > -1):
        rows[i].style.display = "";
    })
    else{
        rows[i].style.display = "none"
     }

   }

  }
 document.querySelector('#myInput').addEventListener('keyup', filterTable, 
  false);

标签： javascriptfilter

解决方案

这里有很多错误：

  • 您使用事件回调变量将变量定义为全局变量（Caps 和 al）
  • 您使用循环外的索引 i 将变量定义为全局变量（firstCol 和 al）
  • 您不能在 if 语句中使用 switch 语句（switch 旨在在给定 var 的可能值的情况下提供替代方案，并避免 else if 级联）

一种方法可能是：

// Edit : rows query can be done only once to save time
let rows = document.querySelectorAll('tr.items'); // or much precise query if needed

function check(event) {
  let caps = event.target.value.toUpperCase();
  let hyphen = caps.replace(/[-]/g, ""); // Edit : caps + hyphen will work
  
  // Browse all rows to check if input matching and hide/show
  // Fortunately row.textContent yields all texts values :)
  for(let i = 0; i < rows.length; i++) {  
    let row = rows[i];
    
    // test caps length to allow revert to all hidden when no text to match
    if(caps.length && (row.textContent.indexOf(caps) >= 0 || row.textContent.indexOf(hyphen) >= 0)) {
      row.style.display = null;
      break; // process next row
    }
    
    row.style.display = 'none'; // Hide row (avoid an else)    
  }
}

document.getElementById('my-input').addEventListener('keyup', check, true);
table {
  width:100%;
  border-collapse: collapse
}

th, td {
  border: 1px solid #000;
}
<p>Type here : <input type="text" id="my-input"></p>
<table>
<tr><th>Id</th><th>Row1</th><th>Row2</th></tr>
<tr class="items" style="display:none"><td>001</td><td>FOO</td><td>BAR</td></tr>
<tr class="items" style="display:none"><td>002</td><td>GOO</td><td>CAR</td></tr>
</table>

默认情况下，行是隐藏的，就像我假设的脚本一样。项目值为 001、002、FOO、BAR、GOO、CAR。只是玩它。

好消息是您可以访问整行的 textContent 而无需查看单个 td，从而节省了很多时间。

推荐阅读