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

Question

I have "tags" on my webpage and once clicked you can see the corresponding image. Example: I click on the Dogs link and I see images of Dogs on my gallery. Something like this:

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

however, it doesn't work for me. Would there be easier/ more affective ways of doing it?

Answer 1

Check for empty value ..

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

should be

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

Answer 2

Hide all images and then show only required images using class selector in 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();
});​

On clicking the anchor, get the category (shortened to "cat") from the anchor's rel attribute, then if the category has length , ie it's not empty, hide all images, then filter the images based on the class that matches the previous rel attribute, and show those images.