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

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属性中获取类别（简称为“猫”），如果类别有，即不为空，隐藏所有图像，然后根据与前一个属性length匹配的类过滤图像，并rel显示那些图像。