堆栈内存溢出
  简体   繁体   English

Jquery，搜索并显示一个隐藏的div

[英]Jquery, search and show a hidden div

 原文  2020-05-29 12:17:27  9   4    javascript/ jquery/ search

问题描述

Im working on a grocery list where you can search and add groceries to your list.我正在制作一份杂货清单，您可以在其中搜索杂货并将其添加到您的清单中。 My grocery items are populated from a MySQL table and the text is added to a div called "foodcard".我的杂货项目是从 MySQL 表中填充的，文本被添加到名为“foodcard”的 div 中。 My Jquery script almost works exactly how i want it, except that all 150+ cards are visible and only when you start typing in the input box do the cards get hidden and fade in the related search term.我的 Jquery 脚本几乎完全按照我想要的方式工作，除了所有 150 多张卡片都是可见的，并且只有当您开始在输入框中输入时，卡片才会隐藏并在相关搜索词中消失。 Im having trouble figuring out how to hide the cards on page load and show only the search term.我无法弄清楚如何在页面加载时隐藏卡片并仅显示搜索词。 ill give you all my code, but please tell me if i need to include anymore生病给你我所有的代码，但请告诉我是否需要再包含

 $(document).ready(function(){ $('#grcsearch').on('keyup', function () { var grcsearch = $('#grcsearch').val().toLowerCase(); $('.foodcard').each(function(){ var $this = $(this); if($this.text().toLowerCase().indexOf(grcsearch) === -1) $this.closest('.foodcard').fadeOut(); else $this.closest('.foodcard').fadeIn(); }) }); });
 .wrapper { text-align: center; }.grocerylistcard { width: 85%; height: 90%; border-radius:15px; padding-bottom: 20px; padding-top: 20px; padding-left: 30px; padding-right: 30px; border-width: 2px; border: solid 2px; border-color: rgb(199, 185, 201); background-color: #D5CAD6; margin: auto; display: inline-block; box-shadow: 5px 5px 3px grey; }.pccontainer1 { display: flex; flex-direction: row; }.foodcard { width: 15%; background-color: rgb(236, 231, 203); margin: 10px; margin-right: 10px;important: margin-left; 10px:important; border-radius: 10px; display: inline-table; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="Expires" content="-1"> <title>J & K Life Assist</title> <:-- MDB icon --> <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> <.-- Font Awesome --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5:11.2/css/all.css"> <?-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts,googleapis,com/css,family=Roboto.300.400.500.700&display=swap"> <.-- Bootstrap core CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <.-- Material Design Bootstrap --> <link rel="stylesheet" href="css/mdb.min.css"> <.-- Your custom styles (optional) --> <link rel="stylesheet" href="/css/style,css"> <!-- custom font awesome kit--> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <div class="wrapper"> <div class="grocerylistcard"> <h3 id="bptitle"> Grocery List </h3> <p>Search and add groceries we need to get on our next trip out!</p> <hr class="my-4"> <div class="md-form form-lg" id="grocerysearchwrap"> <input type="text" id="grcsearch" class="form-control form-control-lg"> <label for="grocerysearch">Search for Groceries</label> </div> <!-- Central Modal Small --> <br /> <!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference --> <div class="pccontainer1"> <div class="foodcard"> Apples </div> <div class="foodcard"> Banana's </div> <div class="foodcard"> Oranges </div> <div class="foodcard"> Butter </div> <div class="foodcard"> Milk </div> </div> <!--pc container--> <div class="pccontainer1"> <div class="foodcard"> Bread </div> <div class="foodcard"> Ramen </div> <div class="foodcard"> Chicken </div> <div class="foodcard"> Ground Beef </div> <div class="foodcard"> Cheese </div> </div> <!--pc container--> <!-- grocery items above --> </div> <!--grocery card ends here--> </div> <!-- customcard wrapper-->

  • im pretty new to this community.我对这个社区很陌生。 thanks for any help!谢谢你的帮助！

4 个解决方案

解决方案1
 1  2020-05-29 12:28:50

The first step is to test if the grcsearch value is an empty string.第一步是测试grcsearch值是否为空字符串。 You can achieve this with:您可以通过以下方式实现：

grcsearch.trim().length == 0

This condition must be in OR with the if condition:此条件必须与if条件为 OR：

if(grcsearch.trim().length == 0 || $this.text().toLowerCase().indexOf(grcsearch) === -1)

At the end of your keyup event you can trigger the event at dom ready simply triggering it:在您的keyup事件结束时，您可以在 dom 就绪时触发事件，只需触发它：

.trigger('keyup');


 $('#grcsearch').on('keyup', function () { var grcsearch = $('#grcsearch').val().toLowerCase(); $('.foodcard').each(function(){ var $this = $(this); if(grcsearch.trim().length == 0 || $this.text().toLowerCase().indexOf(grcsearch) === -1) $this.closest('.foodcard').fadeOut(); else { $this.closest('.foodcard').fadeIn(); } }) }).trigger('keyup');
 .wrapper { text-align: center; }.grocerylistcard { width: 85%; height: 90%; border-radius:15px; padding-bottom: 20px; padding-top: 20px; padding-left: 30px; padding-right: 30px; border-width: 2px; border: solid 2px; border-color: rgb(199, 185, 201); background-color: #D5CAD6; margin: auto; display: inline-block; box-shadow: 5px 5px 3px grey; }.pccontainer1 { display: flex; flex-direction: row; }.foodcard { width: 15%; background-color: rgb(236, 231, 203); margin: 10px; margin-right: 10px;important: margin-left; 10px:important; border-radius: 10px; display: inline-table; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="grocerylistcard"> <h3 id="bptitle"> Grocery List </h3> <p>Search and add groceries we need to get on our next trip out,</p> <hr class="my-4"> <div class="md-form form-lg" id="grocerysearchwrap"> <input type="text" id="grcsearch" class="form-control form-control-lg"> <label for="grocerysearch">Search for Groceries</label> </div> <!-- Central Modal Small --> <br /> <!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference --> <div class="pccontainer1"> <div class="foodcard"> Apples </div> <div class="foodcard"> Banana's </div> <div class="foodcard"> Oranges </div> <div class="foodcard"> Butter </div> <div class="foodcard"> Milk </div> </div> <!--pc container--> <div class="pccontainer1"> <div class="foodcard"> Bread </div> <div class="foodcard"> Ramen </div> <div class="foodcard"> Chicken </div> <div class="foodcard"> Ground Beef </div> <div class="foodcard"> Cheese </div> </div> <!--pc container--> <!-- grocery items above --> </div> <!--grocery card ends here--> </div> <!-- customcard wrapper-->

解决方案2
 1 已采纳  2020-05-29 12:39:16

I made two changes:我做了两个改变：

in the css for setup initially state在 css 中进行初始设置 state

.foodcard{display: none}

and in JS, add a condition for text empty并在 JS 中，为文本空添加条件

 grcsearch.trim().length === 0


 $(document).ready(function(){ $('#grcsearch').on('keyup', function () { var grcsearch = $('#grcsearch').val().toLowerCase(); $('.foodcard').each(function(){ var $this = $(this); if($this.text().toLowerCase().indexOf(grcsearch) === -1 || grcsearch.trim().length === 0) { $this.closest('.foodcard').fadeOut();} else $this.closest('.foodcard').fadeIn(); }) }); });
 .wrapper { text-align: center; }.grocerylistcard { width: 85%; height: 90%; border-radius:15px; padding-bottom: 20px; padding-top: 20px; padding-left: 30px; padding-right: 30px; border-width: 2px; border: solid 2px; border-color: rgb(199, 185, 201); background-color: #D5CAD6; margin: auto; display: inline-block; box-shadow: 5px 5px 3px grey; }.pccontainer1 { display: flex; flex-direction: row; }.foodcard { width: 15%; background-color: rgb(236, 231, 203); margin: 10px; margin-right: 10px;important: margin-left; 10px:important; border-radius: 10px; display. inline-table: } .foodcard{display: none}
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="Expires" content="-1"> <title>J & K Life Assist</title> <:-- MDB icon --> <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> <.-- Font Awesome --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5:11.2/css/all.css"> <?-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts,googleapis,com/css,family=Roboto.300.400.500.700&display=swap"> <.-- Bootstrap core CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <.-- Material Design Bootstrap --> <link rel="stylesheet" href="css/mdb.min.css"> <.-- Your custom styles (optional) --> <link rel="stylesheet" href="/css/style,css"> <!-- custom font awesome kit--> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <div class="wrapper"> <div class="grocerylistcard"> <h3 id="bptitle"> Grocery List </h3> <p>Search and add groceries we need to get on our next trip out!</p> <hr class="my-4"> <div class="md-form form-lg" id="grocerysearchwrap"> <input type="text" id="grcsearch" class="form-control form-control-lg"> <label for="grocerysearch">Search for Groceries</label> </div> <!-- Central Modal Small --> <br /> <!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference --> <div class="pccontainer1"> <div class="foodcard"> Apples </div> <div class="foodcard"> Banana's </div> <div class="foodcard"> Oranges </div> <div class="foodcard"> Butter </div> <div class="foodcard"> Milk </div> </div> <!--pc container--> <div class="pccontainer1"> <div class="foodcard"> Bread </div> <div class="foodcard"> Ramen </div> <div class="foodcard"> Chicken </div> <div class="foodcard"> Ground Beef </div> <div class="foodcard"> Cheese </div> </div> <!--pc container--> <!-- grocery items above --> </div> <!--grocery card ends here--> </div> <!-- customcard wrapper-->

解决方案3
 0  2020-05-29 12:20:45

You can hide all the cards in document ready callback:您可以在文档就绪回调中隐藏所有卡片：

$(document).ready(function(){
   $('.foodcard').hide()
...
}

// For handling clearing search text
$('#grcsearch').change(function () {
    if ($(this).val().trim() == '') {
      $(".foodcard").hide()
    }
})

解决方案4
 0  2020-05-29 12:22:27

You could use display: none;你可以使用display: none; on .foodcard in your CSS file, so that the elements are hidden even before the page is loaded在.foodcard文件中的 .foodcard 上，以便在页面加载之前隐藏元素

Then you can use the .show() or .hide() jquery functions in your JS file to display/hide the elements然后您可以在 JS 文件中使用.show()或 .hide .hide() jquery 函数来显示/隐藏元素

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jQuery显示隐藏的DIV（无效） - Show hidden DIV with jQuery (Not working) 使用JQuery在Fancybox中显示隐藏的div无效 - Show hidden div in Fancybox using JQuery not working 隐藏的div不会在点击时显示-Javascript，没有Jquery - Hidden div will not show on click - Javascript, no Jquery Jquery .show（）没有透露隐藏可见性的div - Jquery .show() not revealing a div with visibility of hidden jQuery Tooltipster应该在悬停时显示一个隐藏的DIV - jQuery Tooltipster should show a hidden DIV on hover 如何在div jquery中显示溢出隐藏元素 - How to show overflow hidden element in div jquery 复选框jQuery显示隐藏的div - Check box jQuery show hidden div JQuery Show Hidden Div命令里面的函数 - JQuery Show Hidden Div command inside function jquery div隐藏和显示，如何控制show div的position？ - jquery div hidden and show, how to control show div's position? 通过在搜索表单中输入div名称/标题来显示隐藏的div？ - Show hidden div by typing div name/title into search form?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM