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