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

Question

我的网页上有“标签”，单击后即可看到相应的图像。 示例：我单击“狗”链接，然后在图库中看到“狗”的图像。 像这样：

<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的类过滤图像属性，并显示这些图像。