jquery - JQueryの効率性は私のコードをより良くして学ぶ必要があります

Question

私は以下のコードを持っていて、それは私が望むことをします、しかし私はそれがそれを正すための悪い方法であることを知っています。アイテムの各セットのコードを複製することなく、同じことをどのように達成できますか。どんな助けでも大歓迎です。

<script type="text/javascript">
$('#plink-1').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-1').slideToggle().addClass('active');
});
$('#plink-2').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-2').slideToggle().addClass('active');
});
$('#plink-3').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-3').slideToggle().addClass('active');
});
$('#plink-4').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-4').slideToggle().addClass('active');
});

Answer 1

$('#plink-1, #plink-2, #plink-3, #plink-4').click(function() {
    var index = this.id.replace('plink-','');  // will give you ->  1,2,..
    $('.active').slideUp().removeClass('active');
    $('#pshow-' + index).slideToggle().addClass('active');
});

Answer 2

これはうまくいくはずです：

$('a[id^="plink-"]').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-' + $(this).prop('id').replace('plink-','')).slideToggle().addClass('active');   
})

このコードを使用すると、plink を追加または削除するときに jquery コードを更新する必要がなくなります

Answer 3

素晴らしい答えをありがとう、あなたは私の頭を正しい方向に導きました。CSSで作成したものに基づいて、次の関数を使用することになりました。まだアニメーションなどを微調整していますが、うまく機能しています。ありがとう！

$('.pitem a').each(function(i) {
    $(this).click(function() {
        $('html, body').animate({ scrollTop: 0 }, 150);
        $('#portfolios').find('.active').fadeOut(500).removeClass('active');
        $('#portfolios').find('#pshow-'+i).fadeIn(500).addClass('active');
    });
});