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

使用此代码，您在添加或删除 plinks 时不需要更新您的 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');
    });
});