Question

我有两个链接，“。sp”和“.sl”，当你点击它们会改变某些内容（“#live”）和（“#paid”）的可见性时，我猜是一种低级别的标签界面。我点击了一个“活跃”类，如果有的话，删除另一个链接上的类。对于这么小的函数来说，这似乎有点臃肿，有没有更好的方法来写这个？

$(function() {
    $('#live').hide();
    $('.sp').click(function() {
        $(this).addClass('active');
        $('#paid').show();
        $('#live').hide();
        $('.sl').removeClass('active');
    });
    $('.sl').click(function() {
        $(this).addClass('active')
            $('#live').show();
            $('#paid').hide();
            $('.sp').removeClass('active');
    });
});

Answer 1

试试这个。

$(function() {
    $('#live').hide();
    var $links = $('.sp, .sl').click(function() {
        $links.removeClass('active');
        var isSp = $(this).addClass('active').hasClass('sp');
        $('#paid').toggle(isSp);
        $('#live').toggle(!isSp);
    });
});

Answer 2

我建议使用一个实用功能，它可以为你做一些常见的工作，并被称为两个地方。

$(function() {
    function clickCommon(current, newItem, oldItem, deactive) {
        $(current).addClass('active');
        $(newItem).show();
        $(oldItem).hide();
        $(deactive).removeClass('active');    
    }

    $('#live').hide();
    $('.sp').click(function() {
        clickCommon(this, "#paid", "#live", ".sl");
    });
    $('.sl').click(function() {
        clickCommon(this, "#live", "#paid", ".sp");
    });
});

在点击时添加/删除类的更好方法

2 个答案: