时间戳

首页 > 解决方案 > 通过 for 循环按部分 id 标签搜索元素

javascript - 通过 for 循环按部分 id 标签搜索元素

问题描述

所以我有这个 svg 地图，其中的街道都包含 id 标签中的街道名称。我想要一个搜索字段，通过将搜索输入部分与街道的 id 匹配来搜索街道。现在我的代码有一些问题。首先，它搜索时区分大小写，其次，ID 对每个空格都有一个下划线，这些需要在搜索中用空格替换，最后，当我进行肯定搜索时，它会为街道着色，但如果我删除搜索，街道会继续显示突出显示的颜色。

document.onkeydown = function(event){
   var searchvalue = document.getElementById("searchfield").value;
   document.querySelector("[id*="+searchvalue+"]").style.stroke = "yellow";}

现在我查找了一些解决方案，一个是创建一个 for 循环来检查每个元素是否符合这些条件，但是我的 svg 包含多个标记名，如“line”、“path”和“polygon”，所以我不知道该怎么做。

这是我的完整 html 代码

标签： javascript

解决方案

您需要在这里为搜索项目分配类，然后在下次搜索时从所有突出显示的路径中删除样式和该类。对于搜索，首先用空格分割路径，然后将字符串大写并用下划线再次加入，即

function changeFunction(event){
  console.log(event);
  var searchvalue = event.split(' ').map(element => element.charAt(0).toUpperCase() + element.slice(1).toLowerCase()).join('_');   
  document.querySelectorAll('.searched').forEach(element => {
    element.removeAttribute('style');
    element.removeAttribute('class');
 });
 if(searchvalue) { 
    document.querySelectorAll("[id*="+searchvalue+"]").forEach(( element) => {
        element.style.stroke = "green";
        element.setAttribute('class', 'searched');
    });

  }  
}

工作演示

推荐阅读