根据用户输入显示或隐藏 div答案

【问题标题】：Show or hide divs depending on user input根据用户输入显示或隐藏 div
【发布时间】：2018-10-30 02:44:45
【问题描述】：

我想在我的网站中加入一个搜索功能，以便用户可以在搜索表单中键入一些关键字，而只有一些 div 会显示出来。我不确定如何比较字符串。这是我的代码：

<h1 class="title">News Journal</h1>

    <input type="text" class="search" placeholder="Search for a subject...">

    <p class="mostViewed">Most visited news websites...</p>

    <div class="divCNN">
    <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
    <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank" href="https://www.cnn.com/"> Visit !</a></p>
    </div>

    <div class="divNYT">
    <a target="_blank" href="https://www.nytimes.com/"><img src="https://pmcvariety.files.wordpress.com/2013/08/t_logo_2048_black.png?w=1000&h=563&crop=1" class="NYT"></a>
    <p class="description">The New York Times is an American newspaper based in New York City with worldwide influence and readership. Founded in 1851, the paper has won 125 Pulitzer Prizes, and its website has 95 millions unique monthly visitors.<a target="_blank" href="https://www.nytimes.com/"> Visit !</a></p>
    </div>

    <div class="divYNews">
    <a target="_blank" href="https://www.yahoo.com/news/"><img src="https://pmcdeadline2.files.wordpress.com/2017/05/yahoo-news-logo.jpg?w=446&h=299&crop=1" class="YNews"></a>
    <p class="description">Yahoo! News is a news website that originated as an internet-based news aggregator by Yahoo!. Articles originally came from news services such as Reuters, Fox News, Al Jazeera, USA Today, CNN, BBC News, etc. 93 millions unique monthly visitors.<a target="_blank" href="https://www.yahoo.com/news/"> Visit !</a></p>
    </div>

    <div class="divWPost">
    <a target="_blank" href="https://www.washingtonpost.com/"><img src="http://neatoday.org/wp-content/uploads/2018/02/washington-post-logo.jpg" class="WPost"></a>
    <p class="description">The Washington Post is a major American daily newspaper founded on December 6, 1877. It has a particular emphasis on national politics and its website has 92 millions unique monthly visitors.<a target="_blank" href="https://www.washingtonpost.com/"> Visit !</a></p>
    </div>

<script type="text/javascript">
    function Search() {

    }
    document.addEventListener("keyup", Search);
</script>

就像输入是 CNN 一样，该函数将 .show() 那个特定的 div 而不是其他的。

感谢您的帮助！

【问题讨论】：

Here is my code: <empty function> :/
是故意的，就是不知道从何说起：/
要获得有意义的回复，在 HTML 中查看多个站点 div 可能会有所帮助
弹性搜索休息 api ;)
刚刚编辑过！

标签： javascript html string search compare

【解决方案1】：

您可以尝试与新闻 div 中每个 a 的 href 进行比较（并为它们提供一个容器以便于选择）：

const input = document.querySelector('.search');
const newsDivs = document.querySelectorAll('#news-container > div');
input.addEventListener("keyup", () => {
  const str = input.value.toLowerCase().trim();
  newsDivs.forEach(newsDiv => {
    const href = newsDiv.children[0].href;
    newsDiv.style.display = 
      href.includes(str) ? 'block' : 'none';
  });
});

<h1 class="title">News Journal</h1>

<input type="text" class="search" placeholder="Search for a subject...">

<p class="mostViewed">Most visited news websites...</p>


<div id="news-container">
  <div class="divCNN">
    <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
    <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank"
        href="https://www.cnn.com/"> Visit !</a></p>
  </div>

  <div class="divNYT">
    <a target="_blank" href="https://www.nytimes.com/"><img src="https://pmcvariety.files.wordpress.com/2013/08/t_logo_2048_black.png?w=1000&h=563&crop=1" class="NYT"></a>
    <p class="description">The New York Times is an American newspaper based in New York City with worldwide influence and readership. Founded in 1851, the paper has won 125 Pulitzer Prizes, and its website has 95 millions unique monthly visitors.<a target="_blank" href="https://www.nytimes.com/"> Visit !</a></p>
  </div>

  <div class="divYNews">
    <a target="_blank" href="https://www.yahoo.com/news/"><img src="https://pmcdeadline2.files.wordpress.com/2017/05/yahoo-news-logo.jpg?w=446&h=299&crop=1" class="YNews"></a>
    <p class="description">Yahoo! News is a news website that originated as an internet-based news aggregator by Yahoo!. Articles originally came from news services such as Reuters, Fox News, Al Jazeera, USA Today, CNN, BBC News, etc. 93 millions unique monthly visitors.
      <a
        target="_blank" href="https://www.yahoo.com/news/"> Visit !</a>
    </p>
  </div>

  <div class="divWPost">
    <a target="_blank" href="https://www.washingtonpost.com/"><img src="http://neatoday.org/wp-content/uploads/2018/02/washington-post-logo.jpg" class="WPost"></a>
    <p class="description">The Washington Post is a major American daily newspaper founded on December 6, 1877. It has a particular emphasis on national politics and its website has 92 millions unique monthly visitors.<a target="_blank" href="https://www.washingtonpost.com/"> Visit !</a></p>
  </div>
</div>

【讨论】：