1

現在、次のコード ブロックを使用して 2 つの div を切り替えています。

$('.btn-my-projects').click(function(e) {
    $('.my-projects').show();
    $('.all-projects').hide();
});

$('.btn-all-projects').click(function(e) {
    $('.my-projects').hide();
    $('.all-projects').show();
});

明らかにそれは機能しますが、これを行うより良い方法があるかどうか疑問に思っています。ハンドラーが 2 つではなく 1 つに圧縮できるように感じます。委任を使用すると、単一のハンドラーにすることができますが、長くなり、どのボタンがクリックされたかを確認するための条件付きチェックが必要になります。

4

4 に答える 4

4

単純：

function toggle(all) {
    $('.all-projects').toggle(all);
    $('.my-projects').toggle(!all);
}

$('.btn-my-projects').click(function() {
    toggle(false);
});

$('.btn-all-projects').click(function() {
    toggle(true);
});

もっと簡潔にしたい場合：

function makeClickHandler(all) {
    return function () {
        $('.all-projects').toggle(all);
        $('.my-projects').toggle(!all);
    };
}

$('.btn-my-projects').click(makeClickHandler(false));
$('.btn-all-projects').click(makeClickHandler(true));

data-*または、まったく異なるアプローチを取り、HTML5属性を使用して、どのボタンがどの div を表示および非表示にするかの間のリンクをマークアップに配置することもできます。このようなもの：

<button class="project-control" data-show=".all-projects">
    Show all projects
</button>
<button class="project-control" data-show=".my-projects">
    Show my projects
</button>

<div class="project all-projects">...</div>
<div class="project my-projects">...</div>

次のような JavaScript を使用します。

$('.project-control').on('click', function () {
    var showSelector = $(this).data('show');
    $('.project').hide();
    $(showSelector).show();
});

注意: 実際のページでは、選択した要素をキャッシュする必要があるでしょう。

于 2012-10-09T15:32:28.760 に答える
1

show() と hide() の代わりに toggle() を使用できます。次に、クラス .projects を .my-projects および .all-projects div に追加し、そのセレクターを切り替えるだけです。

于 2012-10-09T15:32:05.167 に答える
0

カスタム属性の使用についてはどうですか?

HTML:

<div class='my-projects'>my-projects</div>
<div class='all-projects'>all-projects</div>
<span class='toggler' hide='.all-projects' show='.my-projects'>btn-my-projects</span>
<span class='toggler' hide='.my-projects' show='.all-projects'>btn-all-projects</span>

および Javascript:

$('.toggler').click(function(e) {
    $($(this).attr('hide')).hide();
    $($(this).attr('show')).show();
});
于 2012-10-09T15:31:16.853 に答える
0

あなたが使用している方法は私が行う方法ですが、要約したい場合は、jqueryのトグルが役立つかもしれませんhttp://api.jquery.com/toggle/

于 2012-10-09T15:31:44.643 に答える