打开/关闭搜索
打开/关闭菜单
933
1525
112
1.4万
植物大战僵尸杂交版Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

微件:RarityFilter：修订间差异

来自植物大战僵尸杂交版Wiki
更多操作
创建页面，内容为“<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;…”
 
无编辑摘要
 
（未显示同一用户的6个中间版本）
第4行： 第4行：
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
    justify-content: space-around;
     gap: 8px;
     gap: 8px;
     margin: 15px 0;
     margin: 15px 0;
     padding: 12px 16px;
     padding: 10px 8px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
     align-items: center;
     align-items: center;
}
}
.pvzhe-rarity-btn {
.pvzhe-rarity-btn {
     padding: 6px 14px;
     padding: 10px 10px;
     border-radius: 20px;
     border-radius: 20px;
     font-size: 13px;
     font-size: 18px;
     cursor: pointer;
     cursor: pointer;
     border: 2px solid transparent;
     border: 2px solid transparent;
     background: #fff;
     background: transparent;
    color: #555;
     transition: all 0.2s;
     transition: all 0.2s;
     white-space: nowrap;
     white-space: nowrap;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
}
.pvzhe-rarity-btn:hover {
.pvzhe-rarity-btn:hover { border-color: #ccc; }
    border-color: #ccc;
.pvzhe-rarity-btn.active { font-weight: bold; }
}
.pvzhe-rarity-btn.all { border-color: #4CAF50; color: #4CAF50; }
.pvzhe-rarity-btn.active {
.pvzhe-rarity-btn.all.active { background: #4CAF50; color: #fff; }
    color: #fff;
.pvzhe-rarity-btn img { height: 50px; }
     font-weight: bold;
@media screen and (max-width: 480px) {
     .pvzhe-rarity-btn {
        padding: 4px 8px;
        font-size: 10px;
        gap: 1px;
    }
    .pvzhe-rarity-btn img { height: 24px; }
    .pvzhe-rarity-filter { gap: 4px; }
}
}
.pvzhe-rarity-btn.all { border-color: #888; }
.pvzhe-rarity-btn.all.active { background: #888; }
.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.purple { border-color: #7B1FA2; color: #7B1FA2; }
.pvzhe-rarity-btn.purple.active { background: linear-gradient(135deg, #CE93D8, #AB47BC); color: #fff; }
.pvzhe-rarity-btn.original { border-color: #A5D6A7; color: #388E3C; }
.pvzhe-rarity-btn.original.active { background: #A5D6A7; color: #1B5E20; }
</style>
</style>


<div class="pvzhe-rarity-filter" id="pvzhe-rarity-filter">
<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 all active" data-rarity="all">全部</button>
     <button class="pvzhe-rarity-btn white" data-rarity="white">白卡</button>
     <button class="pvzhe-rarity-btn white" data-rarity="white"><img src="https://new.pvzhe.wiki/images/b/b9/%E7%99%BD%E5%8D%A1.png">白卡</button>
     <button class="pvzhe-rarity-btn gold" data-rarity="gold">至尊金卡</button>
     <button class="pvzhe-rarity-btn gold" data-rarity="gold"><img src="https://new.pvzhe.wiki/images/8/83/%E9%87%91%E5%8D%A1.png">至尊金卡</button>
     <button class="pvzhe-rarity-btn diamond" data-rarity="diamond">臻享钻卡</button>
     <button class="pvzhe-rarity-btn diamond" data-rarity="diamond"><img src="https://new.pvzhe.wiki/images/b/bb/%E9%92%BB%E5%8D%A1.png">臻享钻卡</button>
     <button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow">梦幻彩卡</button>
     <button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow"><img src="https://new.pvzhe.wiki/images/1/10/%E5%BD%A9%E5%8D%A11.png">梦幻彩卡</button>
     <button class="pvzhe-rarity-btn star" data-rarity="star">星光闪卡</button>
     <button class="pvzhe-rarity-btn star" data-rarity="star"><img src="https://new.pvzhe.wiki/images/e/e9/%E6%98%9F%E5%8D%A11.png">星光闪卡</button>
     <button class="pvzhe-rarity-btn original" data-rarity="original">原卡</button>
     <button class="pvzhe-rarity-btn original" data-rarity="original"><img src="https://new.pvzhe.wiki/images/6/68/%E5%8E%9F%E5%8D%A1.png">原卡</button>
</div>
</div>
<script>
(function() {
    var raritySections = {
        'white': '白卡',
        'gold': '至尊金卡',
        'diamond': '臻享钻卡',
        'rainbow': '梦幻彩卡',
        'star': '星光闪卡',
        'original': '原卡'
    };
    function countCards() {
        var counts = { all: 0 };
        $('.pvzhe-card').each(function() {
            counts.all++;
        });
        var $container = $('.pvzhe-card-container');
        $container.each(function() {
            var $prev = $(this).prevAll('.mw-heading, h2, h3').first();
            var title = $prev.text().trim();
            for (var key in raritySections) {
                if (title.indexOf(raritySections[key]) !== -1) {
                    if (!counts[key]) counts[key] = 0;
                    counts[key] += $(this).find('.pvzhe-card').length;
                }
            }
        });
        $('.pvzhe-rarity-btn').each(function() {
            var rarity = $(this).data('rarity');
            var count = counts[rarity] || 0;
            $(this).text($(this).text().replace(/\(\d+\)/, '') + ' (' + count + ')');
        });
    }
    function filterByRarity(rarity) {
        if (rarity === 'all') {
            $('.pvzhe-card').show();
            $('.pvzhe-card-container').show();
            $('.mw-heading, h2, h3').show();
            return;
        }
        var targetTitle = raritySections[rarity];
        if (!targetTitle) return;
        $('.pvzhe-card').hide();
        $('.pvzhe-card-container').hide();
        var $headings = $('.mw-heading, h2, h3');
        var found = false;
        $headings.each(function() {
            var $heading = $(this);
            if ($heading.text().trim().indexOf(targetTitle) !== -1) {
                found = true;
                $heading.show();
                var $next = $heading.nextAll('.pvzhe-card-container').first();
                if ($next.length) {
                    $next.show();
                    $next.find('.pvzhe-card').show();
                }
            } else if (found && $heading.is('h2, h3, .mw-heading')) {
                return false;
            }
        });
    }
    $('.pvzhe-rarity-btn').click(function() {
        $('.pvzhe-rarity-btn').removeClass('active');
        $(this).addClass('active');
        filterByRarity($(this).data('rarity'));
    });
    countCards();
})();
</script>
</includeonly>
</includeonly>

2026年6月21日 (日) 08:41的最新版本

检索自“https://new.pvzhe.wiki/index.php?title=微件:RarityFilter&oldid=5462”