我想擁有可以搜索我的圖像的鏈接

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的類過濾圖像屬性，並顯示這些圖像。