我正在制作一個搜索欄，這是我目前的 JavaScript 代碼：
function search_product() {
var searchbar, filter, cards, card, h1, i, txtValue;
searchbar = document.getElementById('searchbar');
filter = searchbar.value.toUpperCase();
cards = document.getElementById("cards");
card = cards.getElementsByClassName('card');
searchbar.addEventListener("keyup", function (event) {
if (event.key === 'Enter') {
event.preventDefault();
for (i = 0; i < card.length; i ) {
h1 = card[i].getElementsByTagName("h1")[0];
txtValue = h1.textContent || h1.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
card[i].style.display = "";
}
else {
card[i].style.display = "none";
}
}
}
})
}
基本上是搜索h1標簽的內容。一切正常，但如果沒有匹配的結果，我想添加一條錯誤訊息，所以我只是制作了這個 HTML 和 CSS：
HTML
<div class="search-results" id="search-results">
<h1>No results found.</h1>
<p>That resource does not exist.</p>
<img src="../img/icons/animated/passaros.gif">
</div>
CSS
.search-results {
background-color: #131313;
height: 48vh;
border-radius: 5px;
text-align: center;
padding: 15px;
display: none;
}
.search-results h1 {
margin: 0;
color: #ffffff;
}
.search-results p {
margin: 0;
color: #cccccc;
}
并將其隱藏起來。我知道如何使用 JS 使它成為一個塊：
document.getElementById("search-results").style.display = "block";
但是我不知道在JS中把這行放在哪里，因為在第一個“if”中我基本上檢查輸入是否為空，如果是則讓所有卡片重新出現，并在“else”中回傳匹配結果。
感謝任何提前提供幫助的人。
uj5u.com熱心網友回復：
根據您的代碼，有多種方法可以識別未找到結果，最簡單的方法是添加標志，比如說標志resultFound名稱
var resultFound;
for (i = 0; i < card.length; i ) {
h1 = card[i].getElementsByTagName("h1")[0];
txtValue = h1.textContent || h1.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
resultFound = true;
card[i].style.display = "";
} else {
card[i].style.display = "none";
}
}
if(resultFound) {
document.getElementById("search-results").style.display = "";
} else {
document.getElementById("search-results").style.display = "block";
}
uj5u.com熱心網友回復：
為什么不為搜索結果宣告變數并在 for 回圈中添加 if 陳述句！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450488.html
標籤：javascript html css
上一篇：從格式化的時間字串中獲取秒數