Question

我有一个照片库网格，希望能够搜索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的代码，但却无法让它用于搜索data-title属性。如果我在搜索框中输入任何内容，它会隐藏每个图像，而不管数据标题attr。

$('#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/

使用Jquery基于输入（搜索栏）值显示/隐藏img元素

2 个答案: