Show/Hide 基于输入（搜索栏）值的 img 元素 Jquery

Question

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

<a href="photo_gallery\photos.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.jpg" alt="fields">
</a>

我修改了一些我在此处找到的有关如何隐藏 div 的代码，但无法完全使用它来搜索 data-title 属性。如果我在搜索框中输入任何内容，它会隐藏每张图片，无论 data-title 属性如何。

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

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

    $('a').each(function() {
        var isMatch = exp.test($('a[data-title='+value+']', this).text());
        $(this).toggle(isMatch);
    });
});

我哪里错了？这也是搜索栏的设置方式。

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

Answer 1

由于您的锚标记没有文本节点，因此使用 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);
    });
});

Answer 2

另一个答案是完全删除 RegExp，因为您正在使用 html5 数据集，如果需要，您可以直接比较这些值。

像这样：

https://jsfiddle.net/edh4131/pq3k5zdo/2/

Show/Hide 基于输入（搜索栏）值的 img 元素 Jquery

Show/Hide img elements based on input (search bar) value with Jquery

html

javascript

css

jquery

toggle