javascript - 如何使用 Alt 属性过滤图像

Question

我有一个图片库，其中还有一个搜索框。我想动态隐藏所有不具有与用户正在搜索的内容相匹配的 alt 属性的图像。我尝试了多种方法，但不断发生的是所有元素最终都被选中。

我的 html 中有以下要搜索的内容:

<input type="text" id="text">

图像嵌套如下:

<ul id="gallery">
    <li>
        <a href="img/01.jpg">
            <img src="img/thumb/01.jpg" alt="This is what I want to search">

https://htmlpreview.github.io/?https://github.com/rodriguesandrewb/photo_gallery_v1/blob/master/index.html任何帮助，将不胜感激!谢谢大家!

Answer 1

$('img:not([alt])').hide();

这会选择没有 alt 属性的 img 标签，并添加 css 使它们隐藏

https://jsfiddle.net/4uwLq9b7/2/

$("#hidebutton").click(function() {
    $('img:not([alt])').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="gallery">
    <li>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Wet_Cappuccino_with_heart_latte_art.jpg" alt="Cappuccino">
    </li>
    <li>
        <img src="http://www.makingsense.nl/wp-content/uploads/2015/12/280314espresso.jpg" alt="espresso">
    </li>
    <li>
        <img src="http://g3yxi3w953w3xjjaj1xcbuay.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/Dollarphotoclub_75628098-e1422257536867.jpg">
    </li>
</ul>
<button id="hidebutton">
    hide
</button>