Question

你好（我是网络开发者初学者）我想对我的图像进行分类或通过选择标记进行排序我不知道如何只展示大熊猫，熊或狗（对不起我的英文）

示例代码：

<div align="center">
  <select>
        <option>Please Chosse</option>
        <option>Pandas</option>
        <option>Bears</option>
        <option>Dogs</option>
  </select>
</div>
<div>
  <table>
    <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/1200px-Grosser_Panda.JPG" width="200px" align="center"></td>
      <td><img src="https://unagb.files.wordpress.com/2015/11/grizzly-bear2.jpg" width="200px" align="center"></td>
      <td><img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/dog-care/images/HP_PCC_md_0144_dog37.jpg" width="200px" align="center"></td>
    </tr>
    <tr>
      <td><img src="http://cdn.history.com/sites/2/2017/03/GettyImages-157278376.jpg" width="200px" align="center"></td>
      <td><img src="https://s-media-cache-ak0.pinimg.com/originals/17/2a/d9/172ad9712f7decf28520a55796d3020a.jpg" width="200px" align="center"></td>
      <td><img src="https://static.independent.co.uk/s3fs-public/styles/article_small/public/thumbnails/image/2017/06/08/18/rottweiler-dog.jpg" width="200px" align="center"></td>
    </tr>
    <tr>
      <td><img src="https://www.adelaidezoo.com.au/wp-content/uploads/sites/2/animals/giant-panda1-706x456.jpg" width="200px" align="center"></td>
      <td><img src="https://puxccbo05z-flywheel.netdna-ssl.com/wp-content/uploads/2015/02/grizzly-bear-1.jpg" width="200px" align="center"></td>
      <td><img src="https://img.buzzfeed.com/buzzfeed-static/static/2017-04/25/4/enhanced/buzzfeed-prod-fastlane-01/enhanced-23831-1493109569-1.jpg" width="200px" align="center"></td>
    </tr>

Answer 1

为每个图片添加一个类，这将有助于您进行分类
了解jQuery或其他可以帮助您完成此类任务的库

这个例子可以帮助你使用jquery来实现这个

＆＃13;

(function() {
  var $imgs = $('#gallery img');
  var $buttons = $('#buttons');
  var tagged = {};

  $imgs.each(function() {
    var img = this;
    var tags = $(this).data('tags');

    if (tags) {
      tags.split(',').forEach(function(tagName) {
        if (tagged[tagName] == null) {
          tagged[tagName] = [];
        }
        tagged[tagName].push(img);
      })
    }
  })

  $('<button/>', {
    text: 'Show All',
    class: 'active',
    click: function() {
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active');
      $imgs.show();
    }
  }).appendTo($buttons);

  $.each(tagged, function(tagName) {
    var $n = $(tagged[tagName]).length;
    $('<button/>', {
      text: tagName + '(' + $n + ')',
      click: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active');
        $imgs
          .hide()
          .filter(tagged[tagName])
          .show();
      }
    }).appendTo($buttons);
  });
}())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div id="buttons"></div>
  <div id="gallery">
    <img data-tags="Pandas"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/1200px-Grosser_Panda.JPG" width="200px" align="center"></td>
      <img data-tags="Bears" src="https://unagb.files.wordpress.com/2015/11/grizzly-bear2.jpg" width="200px" align="center"></td>
      <img data-tags="Dogs" src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/dog-care/images/HP_PCC_md_0144_dog37.jpg" width="200px" align="center">
    
  </div>
</div>

＆＃13;

如何分类图像？

1 个答案: