使用Jquery基於輸入（搜索欄）值顯示/隱藏img元素

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屬性。 如果我在搜索框中輸入任何內容，它將隱藏每張圖像，而不管該數據標題的屬性如何。

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