根据用户输入显示或隐藏div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据用户输入显示或隐藏div相关的知识，希望对你有一定的参考价值。
我想在我的网站上添加一个搜索功能，以便用户可以在搜索表单中键入一些关键字，只显示一些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而不是其他。
谢谢你的帮助 ！
答案
您可以尝试与新闻div中的每个href的a进行比较（并为他们提供容易选择的容器）：
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>以上是关于根据用户输入显示或隐藏div的主要内容，如果未能解决你的问题，请参考以下文章