我试图为JSON数据生成的链接/div添加一个过滤器.
如果数据不是通过JSON格式生成的，我已经有了一个搜索过滤器.但我真的需要使用JSON来更快地加载和处理.
问题是，这样做时，它无法过滤链接.它应该根据<a></a>个标签中的文本过滤div，包括<span>中的一些隐藏文本..
在本例中，它只能过滤JSON中的第一项，但不能过滤其余项.
// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("links-list");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
// JSON Data for each links
const maincards = {
"linksList": [{
'name': 'Java Bookmarks',
'title': 'Java Bookmarks',
'favicon': '../assets/links-favicons/java-bookmarks.png',
'url': '#',
'tags': 'Login, Logout, Log-in, Log in, Log-out Log out',
'linkattributes': 'rel="noopener noreferrer" target="_blank"'
},
{
'name': 'Chrono',
'title': 'Chrono',
'favicon': '../assets/links-favicons/chrono.ico',
'url': '#',
'tags': 'Login, Logout, Log-in, Log in, Log-out Log out',
'linkattributes': 'rel="noopener noreferrer" target="_blank"'
},
{
'name': 'Kanban (May)',
'title': 'EDEN Kanban',
'favicon': '../assets/links-favicons/kanban.ico',
'url': '#',
'tags': 'Login, Logout, Log-in, Log in, Log-out Log out, Kanban board',
'linkattributes': 'rel="noopener noreferrer" target="_blank"'
},
]
};
const createMainCardLinks = ({
name,
title,
favicon,
url,
tags,
linkattributes
}) => `
<div class="card link-container">
<img class="link-img" src="${favicon}"/>
<a class="link-title stretched-link" href="${url}" ${linkattributes} title="${title}">${name} <span class="h-0">${tags}</span></a>
</div>
`;
const links = maincards.linksList.map(createMainCardLinks);
links.forEach(links => {
document.getElementById("load-json-data").innerHTML += links;
});.h-0 {
display: none;
}<body>
<input id="search-filter-cards" type="text" autocomplete="off" placeholder="Type here to search">
<div id="links-list">
<div class="link-headers"><a class="mb-0">Sample Links</a></div>
<div id="load-json-data"></div>
</div>
</body>我是JS的初学者，我已经有一段时间没有解决这个问题了.无论如何，提前谢谢你的帮助.