2

写真の Web サイトを更新し、jquery を使用してポートフォリオの「カテゴリ」を表示または非表示にしようとしています。私は至る所で検索しましたが、最終的にここでこのソリューションを思いつきました:

http://jsfiddle.net/EwNRJ/145/

それは正常に動作します。カテゴリのボタンをクリックすると、残りが非表示になり、そのカテゴリが表示されます。しかし、コードが乱雑すぎたり、短縮できるのでしょうか? コード忍者で、それが合法かどうか、またはスリム化できるかどうかを知っている人はいますか?

私は主に、他のカテゴリを非表示にする方法に関心があります。機能ごとに、他のすべてのカテゴリを 1 つずつリストし、クリックしたカテゴリを「表示」します。したがって、ユーザーが「ポートレート」をクリックすると、最初にポートレート クラスが表示され、次に他のすべてのクラス (ランドスケープ、パーソナルなど) が 1 つずつ非表示になります。今後カテゴリを追加する場合は、各機能を更新する必要があります。大したことではありません。より良い方法がないこと、および私のコードが見栄えがよく、jqueryがまったく新しいことによるメモリの問題が発生しないことを確認したいだけです。

前もって感謝し、素晴らしい一日を。

PS本物のジェダイが別のものを見たいと思ったら、私は少しだけ気になります。現在、各 div はほぼ次々と消えていきます。一時停止または何かして、それらすべてを一斉にフェードアウトさせる方法はありますか? それが理にかなっていることを願っています。ドミノのように 1 つずつすばやく崩壊するのではなく、(可能であれば) 一緒にアニメーション化してほしいと思います。わかりました。ありがとうございます。

4

3 に答える 3

3

これを試して：

$('button').click(function() {
    $(this).siblings('.post').hide() // or $('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

デモ

于 2012-07-08T06:35:54.077 に答える
0

毎回検索するのではなく、カテゴリをキャッシュする必要があります。

document.ready(function() {
     var Wedding = $('.wedding');
});

2 番目の問題については、コールバック関数をパラメーターとして使用する必要があります。コールバック関数は、メイン関数が終了した後にのみ実行されます。

例：

 $('div').click(function() {
      $(this).animate({'top': '50px'}, 500, function() {
           //callback - start
           $(this).text('a');
           //callback-end
     });
});
于 2012-07-08T06:33:57.960 に答える
0

このようにします http://jsfiddle.net/fedmich/M4G4r/

ボタンをトグルの中に入れます。要素を .posts 内に配置します

ハッピーコーディング:)

$('.toggles button').click(function(){
    var d_id = this.id;
    var obj_cur = $('.posts .' + d_id);

    $('.post').not( obj_cur ).hide(500);
    obj_cur.show(500);
});
于 2012-07-08T06:43:46.607 に答える