通过链接在图片库上使用过滤器


Using filters on image gallery through links

首先,我的英语不是最好的,所以我会尽我最大的努力解释我正在做的事情:

我有一个图片库在我的网站,所有的图像都存储在一个数据库中。每个图像都有一个类别类型,数据库中有一个包含所有类别的表。

在图片库下面,我有这个导航,列出了所有的类别:

<nav class="cl-effect-5">
                    <a href="#"><span data-hover="All">All</span></a>
                    <a href="#"><span data-hover="Black and White">Black and white</span></a>
                    <a href="#"><span data-hover="Panoramic">Panoramic</span></a>
                    <a href="#"><span data-hover="Nature">Nature</span></a>
                    <a href="#"><span data-hover="City">City</span></a>
                    <a href="#"><span data-hover="Others">Others</span></a>
                </nav>

我想让用户点击这些类别之一,画廊将只显示有该类别的图片,但我不知道如何做到这一点,我不是很熟练的编码。

谢谢,)

在JS文件:

$(document).ready(function() {
  $('.cl-effect-5 a span ').click(function() {
  var selected=$(this).attr('data-hover');
  $.get("query.php?selected="+selected, function(data){
  $('.result').html(data);
   });
 });
});

你应该创建query。php文件和你的查询和代码在其中并返回结果

 $type = $_POST["selected"];
 $query="select * from table where type='".$type."'";
 $html="";
 while($row = mysqli_fetch_array($query)) {
   $html .= $row['image_link'];
  }
 echo $html ;