Question

我的网页上有“标签”，点击后您就可以看到相应的图片了。示例：我单击Dogs链接，我在我的图库中看到Dogs的图像。像这样：

<a href="#" rel="dog">Show Dogs</a>

<script>
$('#filter a').click(function() {
    if($(this).attr('rel')) {
        $('img').hide().filter('[class="' + $(this).attr('rel') + '"]').show();
        $('img').show();
    }

return false;

}）;

<img src="http://www.petliferadio.com/doggydog.jpg" class="dog">

但是，它对我不起作用。这样做会更容易/更有效吗？

Answer 1

检查空值..

 if($(this).attr('rel')) {

应该是

 if($(this).attr('rel') != '') {
        $('img').hide();
        $('.' + $(this).attr('rel')).show();
    }

Answer 2

隐藏所有图像，然后在jquery中使用类选择器仅显示所需的图像。

$('#filter a').click(function() {
    if($(this).attr('rel')) {
        $('img').hide();
        $('img.'+$(this).attr("rel)).show();
    }

return false;
});

Answer 3

$('#filter a').on('click', function() {
    var cat = $(this).attr('rel');
    if(cat.length) $('img').hide().filter('.'+cat).show();
});

单击锚点后，从锚点的rel属性中获取类别（缩写为“cat”），然后如果类别具有length，即它不为空，则隐藏所有图像，然后过滤基于与先前rel属性匹配的类的图像，并显示这些图像。

我想要有可以搜索我的图像的链接

3 个答案: