1

私のウェブページには「タグ」があり、クリックすると対応する画像が表示されます。例: [犬] リンクをクリックすると、ギャラリーに犬の画像が表示されます。このようなもの：

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

しかし、それは私にはうまくいきません。それを行うためのより簡単で感情的な方法はありますか？

4

3 に答える 3

1

空の値を確認してください ..

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

する必要があります

 if($(this).attr('rel') != '') {
        $('img').hide();
        $('.' + $(this).attr('rel')).show();
    }
于 2012-11-02T20:05:50.210 に答える
0 
$('#filter a').on('click', function() {
    var cat = $(this).attr('rel');
    if(cat.length) $('img').hide().filter('.'+cat).show();
});​

アンカーをクリックしたら、アンカーのrel属性からカテゴリ（ "cat"と短縮）を取得します。カテゴリにがlength空でない場合は、すべての画像を非表示にしてから、前のrel属性に一致するクラスに基づいて画像をフィルタリングします。それらの画像を表示します。

于 2012-11-02T20:07:00.270 に答える
0

すべての画像を非表示にしてから、jquery のクラス セレクターを使用して必要な画像のみを表示します。

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

return false;
});​
于 2012-11-02T20:05:33.987 に答える