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();

这会选择没有img属性的alt代码并添加css以使其hidden

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>

Answer 2

解决方案1：

$('img:not([alt="' + $('#text').val() + '"])').hide();

解决方案2：

$('img').not('[alt="' + $('#text').val() + '"]').hide();

Answer 3

以下香草JS的例子。

使用document.querySelectorAll('img');选择图片。如果具有alt标记的值，请检查每个图像。

https://jsbin.com/hiniliheru/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script>
    var app = {
      hide:function(){
        var elms = document.querySelectorAll('img');
        for(var i = 0; i < elms.length; i++){
            if(!elms[i].alt){
                elms[i].style.display = 'none';
            }
        }
      }          
    }
  </script>
  <title>JS Bin</title>
</head>
<body onload="app.hide()">
<img src="" alt="This is what I want to search">
  <img src="">
  <img src="" alt="This is what I want to search">
  <img src="">
  <img src="" alt="This is what I want to search">
  <img src="" alt="This is what I want to search">
</body>
</html>

Answer 4

有点脏，但我猜你想要一个简单的搜索引擎来搜索图片标签的每个alt属性的文本。

您可以尝试这样做。

＆＃13;

function search(v) {
  reset();

  var out = document.querySelectorAll('img:not([alt*="' + v + '"])');
  [].forEach.call(out, function(x) {
    x.style.display = 'none';
  });
}

function reset() {
  [].forEach.call(document.querySelectorAll('img'), function(x) {
    x.removeAttribute('style');
  });
}

＆＃13;

input {
  display: block;
}

＆＃13;

<input onkeyup="search(this.value)" placeholder="search..." />

<img src="http://mxamber.com/wp-content/uploads/2015/12/side-blue-color-picture-as-your-ideas-and-decoration-green-color-picture-decoration-style-picture-example-of-good-walking-shoes-for-europe-as-your-one-example-and-idea-style-100x100.jpg" alt="lorem ipsum"
/>
<img src="http://mxamber.com/wp-content/uploads/2015/12/simple-example-that-looks-natural-picture-the-example-of-best-family-vacations-in-florida-style-the-example-of-yellow-and-white-color-that-looks-combine-will-be-one-example-place-that-looks-well-100x100.jpg"
alt="lorem ipsum dolor" />
<img src="https://moodle.org/pluginfile.php/17683/user/icon/moodleorgcleaned_moodleorg/f1?rev=1" alt="sit amet" />
<img src="http://mxamber.com/wp-content/uploads/2015/12/white-example-material-black-color-wall-small-shaped-picture-white-color-plane-ideas-of-well-style-as-your-ideas-netjets-prices-the-flooring-style-that-looks-well-example-plane-100x100.jpg" alt="google"
/>

＆＃13;

如何使用Alt属性过滤图像

4 个答案: