根据匹配的类和内容隐藏和显示 DIV答案

【问题标题】：Hide and display DIV's depending on matching class and content根据匹配的类和内容隐藏和显示 DIV
【发布时间】：2021-09-09 15:54:40
【问题描述】：

我正在尝试隐藏或显示 div，具体取决于它是否具有与内容匹配的类。

在本例中，名为“Countries”的类包含文本“USA”。如果在名为“Country”的类中有“USA”，我想显示“search-result”div。

这是我的尝试。如果我删除它，它会隐藏 div 'Country'

document.querySelectorAll(".search-result").forEach((z) => {

然后改变？ (z.style.display = "块") : (z.style.display = "none");

到 y.style.display

但我需要隐藏整个 div。

有人可以帮忙吗？

<html>
  <head>
    <style></style>
    <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
  </head>
  <body>
    <div class="Countries">USA</div>

    <div class="search-result">
      <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
      <div>The body of the result</div>
    </div>
    <div class="search-result">
      <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
      <div>The body of the result</div>
    </div>
    <div class="search-result">
      <div class="Country d-none">Canada, Bolivia, Paraguay</div>
      <div>The body of the result - you should not see this one</div>
    </div>
    <div class="search-result">
      <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
      <div>The body of the result</div>
    </div>
    <div class="search-result">
      <div class="Country d-none">Canada, Bolivia, Paraguay</div>
      <div>The body of the result - you should not see this one</div>
    </div>

    <script type="text/javascript">
      document.querySelectorAll(".Countries").forEach((x) => {
        document.querySelectorAll(".Country").forEach((y) => {
          document.querySelectorAll(".search-result").forEach((z) => {
            y.innerText.includes(x.innerText)
              ? (z.style.display = "block")
              : (z.style.display = "none");
          });
        });
      });
    </script>
  </body>
</html>

【问题讨论】：

为什么叫复数 <div class="Countries">USA</div> 而你里面只有一个国家？
为什么字符串 "USA" 在 DIV 中，而不是搜索输入值或 JS 中的变量？
既然您在 HTML 中硬编码了“USA”，为什么您的结果还没有被在 .Countries 中写入“USA”的同一后端过滤？
为什么 .Countries 和 .search-result 没有共同的父对象供参考？当您执行 querySelectorAll(".searh-result") 时，您可能会在文档中得到 any .search-result - 不一定是引用美国的那个
感谢您抽出宝贵时间发表评论。为了隐私，我更改了类名，我同意它们没有多大意义，但所需的逻辑仍然存在。我可以在每个 div 的任何地方添加“国家”的信息。数据是通过 JSON 文件提取的，我不想将任何数据硬编码到 JS 中。没有任何数据是硬编码的 IRL。根据页面，它可以更改为“国家/地区”div 中的任何国家/地区名称。这将出现在不同“国家”的多个页面上。

标签： javascript

【解决方案1】：

由于您已经使用了 className d-none，因此请不要使用 z.style.display = "none|block"
改用 z.classList.toggle("d-none", !isMatch) 其中isMatch 是一个布尔值，因为已找到文本。为此请使用String.prototype.includes()。

例子：

// UTILITY functions

const EL = (sel, PAR) => (PAR||document).querySelector(sel); 
const ELS = (sel, PAR) => (PAR||document).querySelectorAll(sel); 
const trimLCase = (str) => str.trim().toLowerCase(); 

// APP

const EL_search = EL("#search");
const filterResults = () => {

  // Get the search value
  const search = trimLCase(EL_search.value);
  
  // Filter search results!
  ELS(".search-result").forEach(EL_result => {
    const EL_country = EL(".Country", EL_result);
    const content = trimLCase(EL_country.textContent);
    const isMatch = content.includes(search);
    EL_result.classList.toggle("d-none", !isMatch);
  });
};


// INIT, EVENTS

EL_search.addEventListener("input", filterResults);
filterResults();

/* Utility classes */

.d-none {
  display: none;
}

Search: <input id="search" value="USA" type=search autocomplete=off>

<div class="search-result">
  <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
  <div>1. The body of the result U,C,B,P</div>
</div>
<div class="search-result">
  <div class="Country d-none">USA, Canada, Paraguay</div>
  <div>2. The body of the result U,C,P</div>
</div>
<div class="search-result">
  <div class="Country d-none">Canada, Bolivia, Paraguay, Guatemala</div>
  <div>3. The body of the result C,B,P,G</div>
</div>
<div class="search-result">
  <div class="Country d-none">USA, Paraguay, Guatemala</div>
  <div>4. The body of the result U,P,G</div>
</div>
<div class="search-result">
  <div class="Country d-none">Bolivia, Paraguay</div>
  <div>5. The body of the result B,P</div>
</div>

以上，因为我使用<input> 进行演示，而不是

const search = EL_search.value.trim().toLowerCase();

对于您可能想要使用的特定情况：

const search = EL(".Country").textContent.trim().toLowerCase();

但是使用 .Country 这样的类元素是没有意义的，因为它可能会在开发后期导致误报。

【讨论】：

【解决方案2】：

    <html>
      <head>
        <style></style>
        <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
      </head>
      <body>
        <div class="Countries">USA</div>
    
        <div class="search-result">
          <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
          <div>The body of the result</div>
        </div>
        <div class="search-result">
          <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
          <div>The body of the result</div>
        </div>
        <div class="search-result">
          <div class="Country d-none">Canada, Bolivia, Paraguay</div>
          <div>The body of the result - you should not see this one</div>
        </div>
        <div class="search-result">
          <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
          <div>The body of the result</div>
        </div>
        <div class="search-result">
          <div class="Country d-none">Canada, Bolivia, Paraguay</div>
          <div>The body of the result - you should not see this one</div>
        </div>
    
        <script type="text/javascript">

const countries = document.querySelector(".Countries");

const searchResults = document.querySelectorAll(".search-result");

for(let i = 0; i < searchResults.length; i++) {
    if(countries.innerText !== searchResults[i].innerText) {
        searchResults[i].parentNode.style.display = "none"
    } else {
        searchResults[i].parentNode.style.display = "block"
    }
}

    </script>
  </body>
</html>

【讨论】：