Question

首先，我的英语不是最好的，所以我会尽力解释我想要做的事情：

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

在图片库下方，我的导航栏中列出了所有类别：

<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>

我希望用户点击其中一个类别，图库只显示具有该类别的图片，但我不知道该怎么做，而且我在编码方面不是很熟练。

谢谢;）

Answer 1

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 ;

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

1 个答案: