查看“︁微件:RarityFilter”︁的源代码

<includeonly>
<style>
.pvzhe-rarity-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
    padding: 12px 16px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    align-items: center;
}
.pvzhe-rarity-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 2px solid transparent;
    background: #fff;
    color: #555;
    transition: all 0.2s;
    white-space: nowrap;
}
.pvzhe-rarity-btn:hover {
    border-color: #ccc;
}
.pvzhe-rarity-btn.active {
    font-weight: bold;
}
.pvzhe-rarity-btn.all { border-color: #4CAF50; color: #4CAF50; }
.pvzhe-rarity-btn.all.active { background: #4CAF50; color: #fff; }
.pvzhe-rarity-btn.white { border-color: #4CAF50; color: #4CAF50; }
.pvzhe-rarity-btn.white.active { background: #A5D6A7; color: #1B5E20; }
.pvzhe-rarity-btn.gold { border-color: #FFC107; color: #C79100; }
.pvzhe-rarity-btn.gold.active { background: linear-gradient(135deg, #FFD700, #FFA000); color: #fff; }
.pvzhe-rarity-btn.diamond { border-color: #42A5F5; color: #42A5F5; }
.pvzhe-rarity-btn.diamond.active { background: linear-gradient(135deg, #42A5F5, #1E88E5); color: #fff; }
.pvzhe-rarity-btn.rainbow { border-color: #e91e63; color: #e91e63; }
.pvzhe-rarity-btn.rainbow.active { background: linear-gradient(135deg, #FF6B6B, #FFD93D, #6BCB77, #4D96FF, #9B59B6); color: #fff; }
.pvzhe-rarity-btn.star { border-color: #FFC107; color: #C79100; }
.pvzhe-rarity-btn.star.active { background: linear-gradient(135deg, #FFF9C4, #FFE082, #FFD54F); color: #333; }
.pvzhe-rarity-btn.original { border-color: #7B1FA2; color: #7B1FA2; }
.pvzhe-rarity-btn.original.active { background: linear-gradient(135deg, #CE93D8, #AB47BC); color: #fff; }
</style>

<div class="pvzhe-rarity-filter" id="pvzhe-rarity-filter">
    <button class="pvzhe-rarity-btn all active" data-rarity="all">全部</button>
    <button class="pvzhe-rarity-btn white" data-rarity="white">白卡</button>
    <button class="pvzhe-rarity-btn gold" data-rarity="gold">至尊金卡</button>
    <button class="pvzhe-rarity-btn diamond" data-rarity="diamond">臻享钻卡</button>
    <button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow">梦幻彩卡</button>
    <button class="pvzhe-rarity-btn star" data-rarity="star">星光闪卡</button>
    <button class="pvzhe-rarity-btn original" data-rarity="original">原卡</button>
</div>

<script>
(function() {
    var raritySections = {
        'white': '白卡',
        'gold': '至尊金卡',
        'diamond': '臻享钻卡',
        'rainbow': '梦幻彩卡',
        'star': '星光闪卡',
        'original': '原卡'
    };

    function countCards() {
        var counts = { all: $('.pvzhe-card').length };

        $('.pvzhe-card-container').each(function() {
            var $container = $(this);
            var $prev = $container.prevAll('h2, .mw-heading').first();
            if (!$prev.length) return;
            var title = $prev.text().trim();

            if (title === '白卡') counts.white = $container.find('.pvzhe-card').length;
            else if (title === '至尊金卡') counts.gold = $container.find('.pvzhe-card').length;
            else if (title === '臻享钻卡') counts.diamond = $container.find('.pvzhe-card').length;
            else if (title === '梦幻彩卡') counts.rainbow = $container.find('.pvzhe-card').length;
            else if (title === '星光闪卡') counts.star = $container.find('.pvzhe-card').length;
            else if (title === '原卡') counts.original = $container.find('.pvzhe-card').length;
        });

        $('.pvzhe-rarity-btn').each(function() {
            var rarity = $(this).data('rarity');
            var count = counts[rarity] || 0;
            var label = $(this).text().replace(/\s*\(\d+\)/, '');
            $(this).text(label + ' (' + count + ')');
        });
    }

    function filterByRarity(rarity) {
        if (rarity === 'all') {
            $('.pvzhe-card').show();
            $('.pvzhe-card-container').show();
            $('.mw-heading, h2').show();
            return;
        }

        var targetTitle = raritySections[rarity];
        if (!targetTitle) return;

        $('.pvzhe-card').hide();
        $('.pvzhe-card-container').hide();
        $('.mw-heading, h2').hide();

        $('.mw-heading, h2').each(function() {
            if ($(this).text().trim() === targetTitle) {
                $(this).show();
                var $next = $(this).nextAll('.pvzhe-card-container').first();
                if ($next.length) {
                    $next.show();
                    $next.find('.pvzhe-card').show();
                }
            }
        });
    }

    $('.pvzhe-rarity-btn').click(function() {
        $('.pvzhe-rarity-btn').removeClass('active');
        $(this).addClass('active');
        filterByRarity($(this).data('rarity'));
    });

    countCards();
})();
</script>
</includeonly>