有没有办法使此查询选择器同时过滤多个标签名?

huangapple go评论57阅读模式
英文:

Is there any way to make this Query Selector filter for multiple tag name?

问题

我试图实现的是一个简单的筛选搜索栏。我有几个不同的div/框,每个框都包含信息,根据内容以h1、h3或p标记显示。最初,所有框都将可见;然而,当您输入在框中出现的文本(或者有时是多个框),每个不匹配的框将被隐藏。

例如,这是其中一个框。如果用户搜索以下任何内容,除非它们共享文本,否则会过滤掉其他框。

  • 奥德赛之门:增强版
  • 放开玩奥德赛之门 EE 合作(2013年)
  • 阿兰多尔(人类祭司)
  • 角色扮演游戏

搜索栏还接受部分文本(所以即使只输入“baldur”,也能起作用)。

好的,既然我们已经解决了这个问题,让我们来解决问题。目前,附加到此搜索栏的脚本仅会过滤掉h1标签。这可能是因为在下面的代码中,h1先出现。说到这里,这就是脚本。

function searchLp() {
    let input = document.getElementById('search-lp').value;
    input = input.toLowerCase();
    let x = document.querySelectorAll('.bigger');
    x.forEach((item) => {   
        if((!item.querySelector("h1").innerHTML.toLowerCase().includes(input))) {
            item.classList.add('hidden');
        } else {
            item.classList.remove('hidden');
        }
    })
}

我也尝试了以下方法,但没有成功。

  1. 在if语句中使用or(||)来包括所有可能的标签。
  2. 将所有标签添加到querySelector中(即querySelector("h1, h3, p"))。
  3. 使用querySelectorAll与所有三个标签。这与上面的方法相同 - 只有h1有效。
  4. 更改代码以检查项目的整个innerHTML(innerHTML.includes(..)),而不仅仅是所选的标签。

最后,如果只能搜索游戏标题(即h1标签),也不是灾难性的。但如果可能的话,我更愿意能够按游戏标题、系列标题、角色名和流派进行搜索。

英文:

What I'm trying to accomplish is a simple filter searchbar. I have several different divs/boxes, each containing information which is displayed with either an h1, h3, or p tag depending on the content. Initially, all of the boxes will be visible; however, when you type in text that appears in the box (or sometimes multiple boxes), every box that doesn't max will be hidden.

For example, this is one of the boxes. If the user were to search for any of the following, every other box would be filtered out (unless they shared text).

  • Baldur's Gate: Enhanced Edition
  • Let's Play Baldur's Gate EE Co-Op (2013)
  • Arandor (Human Priest)
  • Roleplaying Game

The searchbar also accepts partial text (so even if you just typed in "baldur", it would still work).


Alright, now that we have that out of the way, let's get to the problem. Right now, the script attached to this searchbar will only filter out h1 tags. This is presumably because in the code below h1 comes first. Speaking of which, here's the script.

function searchLp() {
    let input = document.getElementById('search-lp').value;
    input = input.toLowerCase();
    let x = document.querySelectorAll('.bigger');
    x.forEach((item) => {   
        if((!item.querySelector("h1").innerHTML.toLocaleLowerCase().includes(input))) {
            item.classList.add('hidden');
        } else {
            item.classList.remove('hidden');
        }
    })
}

I've also tried the following, with no success.

  1. Using or (||) in the if statement to include all of the possible tags.
  2. Adding all of the tags into the querySelector (i.e. querySelector("h1, h3, p").
  3. Using querySelectorAll with all three tags. This does the same as above - only h1 works.
  4. Altering the code to check the innerHTML (innerHTML.includes(..)) of the item entirely, not just the tags selected.

In the end, it's not catastrophic if you can only search for the game titles (that is, the h1 tags). But I'd prefer to be able to search by game title, series title, character name and genre if possible.

答案1

得分: 0

使用 querySelectorAll("p, h1, h3") 获取所有这些元素,然后使用 Array.prototype.some() 来测试它们是否包含搜索文本。

function searchLp() {
  let input = document.getElementById('search-lp').value;
  input = input.toLowerCase();
  let x = document.querySelectorAll('.bigger');
  x.forEach((item) => {
    let fields = [...item.querySelectorAll("h1,h3,p")];
    if (fields.some(el => el.innerHTML.toLocaleLowerCase().includes(input))) {
        item.classList.add('hidden');
      } else {
        item.classList.remove('hidden');
      }
    }
  });
}
英文:

Use querySelectorAll("p, h1, h3") to get all those elements, and Array.prototype.some() to test if any of them contain the search text.

function searchLp() {
  let input = document.getElementById('search-lp').value;
  input = input.toLowerCase();
  let x = document.querySelectorAll('.bigger');
  x.forEach((item) => {
    let fields = [...item.querySelectorAll("h1,h3,p")];
    if (fields.some(el => el.innerHTML.toLocaleLowerCase().includes(input)) _ {
        item.classList.add('hidden');
      } else {
        item.classList.remove('hidden');
      }
    }
  });
}

huangapple
  • 本文由 发表于 2023年4月4日 04:38:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/75923593.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定