javascript - 如何使搜索按钮按 <p> 名称过滤图库图像

Question

我有一个图片库，其中每个图片都有标题，还有一个带搜索按钮的输入字段。当我单击搜索按钮时，我希望显示包含特定字符的图像并隐藏其余字符，并且当输入字段为空时再次显示所有图像。

就像如果我输入“c”，所有标题为“TitleCat”的图像将被保留并隐藏。 如果我输入“标题”，所有图像仍应显示。

<button id="search" onclick="sortImage()" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"> 
    </input>SEARCH
</button>

<div id="Images">
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
</div>

我需要创建一个函数 sortImage() ，但我不知道如何 接近它。

Answer 1

在输入更改时，启动一个查看每个 p 的函数，并对不包含搜索值的 p 的每个父级应用类“隐藏”，类似

function searchGallery(data) {
    $("#Images p").each(function() {
        $(this).parent.toggleClass('hide',!$(this).html().contains(data));
    });
}

决定是否进行搜索 CI。