Show/hide 'div' 使用 JavaScript 不使用搜索栏输入

Question

我在使用CSS类时遇到问题运行javascripthide/showdiv，初始状态全部divs 比我在 searchBar 中输入菜谱名称（如 div 排骨）时更隐藏，它只显示排骨 div 并且到目前为止工作正常，但是当我清除 searchBar 时显示所有 div 而不是全部隐藏。

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 if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
        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;
}

<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 class="recipe__card mix ">
                <img src="./asset/img" alt="" class="recipe__img">
                <h3 class="recipe-title-item"></h3>
                <a href="#" class="recipe__button">
                    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>

Answer 1

如果我很好地理解了你的问题，你正试图在清除输入时删除所有 divs（将显示更改为 none）。但请记住，输入是一个空字符串，所有 div 都包含该字符串，因此第一个 if 为真。为了克服这个问题，消除 input = ''.

时的实例

for (i = 0; i < recipeCard.length; i++) {
  
// added this
  if( input == ''){
    recipeCard[i].style.display = "none";
  }
// end

   else if (recipeCard[i].textContent.toLowerCase().includes(input)) {
        recipeCard[i].style.display = "block";
    } else if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
        recipeCard[i].style.display = "none";

    } 
}

Answer 2

满足您要求的一种方法是检查输入值长度。如果它等于 0，则隐藏 recipeCards。请参阅下面的 Js 代码段。

if(input.length <= 0) {
  recipeCard[i].style.display = "none";
}

Answer 3

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 if (!recipeCard[i].textContent.toLowerCase().includes(input) && recipeCard[i].style.display === "block") {
        recipeCard[i].style.display = "none";

    }
    if(document.getElementById('search').value==""){
           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;
}

<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 class="recipe__card mix ">
                <img src="./asset/img" alt="" class="recipe__img">
                <h3 class="recipe-title-item"></h3>
                <a href="#" class="recipe__button">
                    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>

Answer 4

if (input == "") {
    Array.from(recipeCard).forEach(card => {
        card.style.display = "none"
    });
}

Show/hide 'div' 使用 JavaScript 不使用搜索栏输入

Show/hide 'div' using JavaScript Not Working with search bar input

html

javascript

css

search