首先,我的英语不是最好的,所以我会尽我最大的努力解释我正在做的事情:
我有一个图片库在我的网站,所有的图像都存储在一个数据库中。每个图像都有一个类别类型,数据库中有一个包含所有类别的表。
在图片库下面,我有这个导航,列出了所有的类别:
<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 ;