Javascript 使用Jquery根据输入（搜索栏）值显示/隐藏img元素

我有一个照片库网格，希望能够搜索img标签的“数据标题”值，只显示具有匹配数据的图像。因此，如果我输入“hay”，下面的图像就会显示出来，但是网站上所有数据标题中没有“hay”的图像都会被隐藏

<a href="photo_gallery\photos\01.jpg" data-lightbox="gallery" data-title
 ="Hay Bales - I love hay bales. Took this snap on a drive through the 
 countryside past some straw fields.">
    <img src="photo_gallery\photos\thumbnails\01.jpg" alt="fields">
</a>  

我哪里出了问题？搜索栏也是这样设置的

 <div class="searchBar">
   <input type="text" name="search" id="search" placeholder="Search">
 </div>

---

由于锚定标记没有文本节点，因此使用JQuery.text（）方法将导致根据空字符串测试值。相反，以元素的数据属性为目标，并将其用作正则表达式测试的主题

$('#search').keyup(function() {

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($(this).data('title'));
        $(this).toggle(isMatch);
    });
});

---

另一种解决方法是完全删除

RegExp

，因为您使用的是和html5数据集，如果需要，您可以直接比较这些值

大概是这样的：

---

感谢您的帮助！：）

$('#search').keyup(function() {

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($(this).data('title'));
        $(this).toggle(isMatch);
    });
});