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'); 
}) 

使用此代碼爲偉大的添加或刪除plinks

Answer 3

感謝時，你會不會需要更新您的jQuery代碼答案，你讓我的頭朝着正確的方向。根據我在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'); 
    }); 
});