我在使用 CSS 類運行 javascript 隱藏/顯示 div 時遇到問題，所有 div 的初始狀態都是隱藏的，而不是當我在 searchBar 中輸入食譜的名稱（如 div 肋骨）時它只顯示肋骨 div 到目前為止正在作業，但是當我清除 searchBar 時，它會顯示所有 div，而不是再次隱藏所有 div。
HTML
<section class="recipe section" id="work">
<h2 class="section__title">Recipe</h2>
<div class="recipe__filters">
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input>
<div class="cat">
<h3>Categories</h3>
<i class="uil uil-arrow-right" id="categories-button"></i>
</div>
<div class="hide_categories" id="h_categories">
<span class="all recipe__item active-recipe " data-filter='all'>All </span>
<span class="recipe__item" data-filter='.breakfast'>Breakfast</span>
<span class="recipe__item" data-filter='.dessert'>dessert</span>
<span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div class="recipe__container container">
<!-- <div >
<img src="./asset/img" alt="Javascript隱藏/顯示div在輸入searchBar上不起作用" >
<h3 ></h3>
<a href="#" >
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div class="recipe__card mix">
<img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Helllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">aelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix burgersandwiches">
<img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Zelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Ribs</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>
CSS
.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}
.recipe-title-item {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
.hide_categories {
display: none;
transition: all ease-in-out;
}
.categories {
display: grid;
padding-bottom: 2rem;
transition: all ease-in-out;
grid-template-columns: repeat(4, max-content);
}
#categories-button {
z-index: 9;
}
.cat {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#categories-button {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.active-recipe {
background-color: var(--first-color);
color: var(--white-color);
}
input[type="text"],
input[type="email"],
textarea[type="text"],
select {
padding-left: 1rem;
}
.recipe {
display: block;
}
JAVASCRIPT
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
for (i = 0; i < recipeCard.length; i ) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else {
recipeCard[i].style.display = "none";
}
}
}
uj5u.com熱心網友回復：
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
for (i = 0; i < recipeCard.length; i ) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
} else {
recipeCard[i].style.display = "none";
}
if (input == "") {
recipeCard[i].style.display = "none";
}
}
}.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}<section class="recipe section" id="work">
<h2 class="section__title">Recipe</h2>
<div class="recipe__filters">
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input>
<div class="cat">
<h3>Categories</h3>
<i class="uil uil-arrow-right" id="categories-button"></i>
</div>
<div class="hide_categories" id="h_categories">
<span class="all recipe__item active-recipe " data-filter='all'>All </span>
<span class="recipe__item" data-filter='.breakfast'>Breakfast</span>
<span class="recipe__item" data-filter='.dessert'>dessert</span>
<span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div class="recipe__container container">
<!-- <div >
<img src="./asset/img" alt="Javascript隱藏/顯示div在輸入searchBar上不起作用" >
<h3 ></h3>
<a href="#" >
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div class="recipe__card mix">
<img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Helllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">aelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix burgersandwiches">
<img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Zelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Ribs</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>我添加的所有內容如下：
if (input == "") {
recipeCard[i].style.display = "none";
}
如果輸入為空白，則不顯示任何配方卡。
uj5u.com熱心網友回復：
我將你的代碼添加到一個片段中，所以我添加了一個條件來檢查輸入的值是否為空，如果是，它將隱藏所有元素，如果不是，它會執行你的代碼。
function search_recipe() {
let input = document.getElementById('search').value
input = input.toLowerCase();
let recipeCard = document.getElementsByClassName('recipe__card');
if(input === ""){
for (i = 0; i < recipeCard.length; i ) {
recipeCard[i].style.display = "none";
}
}
else {
for (i = 0; i < recipeCard.length; i ) {
if (recipeCard[i].textContent.toLowerCase().includes(input)) {
recipeCard[i].style.display = "block";
}
else {
recipeCard[i].style.display = "none";
}
}
}
}.recipe__container {
padding-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.recipe__filters {
display: flex;
justify-content: center;
align-items: center;
column-gap: .75rem;
flex-direction: column;
}
.recipe__item {
cursor: pointer;
color: var(--title-color);
padding: .25rem .75rem;
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__items {
cursor: pointer;
color: var(--title-color);
font-weight: var(--font-medium);
border-radius: .5rem;
margin-bottom: 2rem;
text-align: center;
}
.recipe__card {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding: 1rem;
border-radius: 1rem;
display: none;
}
.recipe__img {
border-radius: 1rem;
margin-bottom: var(--mb-1-25);
width: 230px;
}
.recipe-title-item {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
.hide_categories {
display: none;
transition: all ease-in-out;
}
.categories {
display: grid;
padding-bottom: 2rem;
transition: all ease-in-out;
grid-template-columns: repeat(4, max-content);
}
#categories-button {
z-index: 9;
}
.cat {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#categories-button {
margin-left: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
.active-recipe {
background-color: var(--first-color);
color: var(--white-color);
}
input[type="text"],
input[type="email"],
textarea[type="text"],
select {
padding-left: 1rem;
}
.recipe {
display: block;
}<section class="recipe section" id="work">
<h2 class="section__title">Recipe</h2>
<div class="recipe__filters">
<input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input>
<div class="cat">
<h3>Categories</h3>
<i class="uil uil-arrow-right" id="categories-button"></i>
</div>
<div class="hide_categories" id="h_categories">
<span class="all recipe__item active-recipe " data-filter='all'>All </span>
<span class="recipe__item" data-filter='.breakfast'>Breakfast</span>
<span class="recipe__item" data-filter='.dessert'>dessert</span>
<span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span>
</div>
</div>
<div class="recipe__container container">
<!-- <div >
<img src="./asset/img" alt="Javascript隱藏/顯示div在輸入searchBar上不起作用" >
<h3 ></h3>
<a href="#" >
More details <i class='uil uil-angle-right-b recipe__icon'></i>
</a>
</div> -->
<div class="recipe__card mix">
<img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Helllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">aelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix burgersandwiches">
<img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix">
<img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Zelllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Telllllllo</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
<div class="recipe__card mix ">
<img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img">
<h3 class="recipe-title-item">Ribs</h3>
<a href="#" class="blog__button">
More details <i class='uil uil-angle-right-b blog__icon'></i>
</a>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450905.html
標籤：javascript html css