查看“︁棋子”︁的源代码

<div style="text-align: center;">
    <span style="font-size: 2em; font-weight: bold;">⚔️ 棋子图鉴 ⚔️</span>
    <p>点击棋子名称可跳转至详情页</p>
</div>

<div class="filter-container">
    <div class="filter-group">
        <div class="filter-label">✨ 稀有度</div>
        <div class="filter-buttons" data-filter-type="rarity">
            <span class="filter-chip active" data-value="all">全部</span>
            <span class="filter-chip" data-value="SSR">SSR</span>
            <span class="filter-chip" data-value="SR">SR</span>
            <span class="filter-chip" data-value="R">R</span>
            <span class="filter-chip" data-value="N">N</span>
        </div>
    </div>
    <div class="filter-group">
        <div class="filter-label">💰 费用</div>
        <div class="filter-buttons" data-filter-type="cost">
            <span class="filter-chip active" data-value="all">全部</span>
            <span class="filter-chip" data-value="1">1费</span>
            <span class="filter-chip" data-value="2">2费</span>
            <span class="filter-chip" data-value="3">3费</span>
            <span class="filter-chip" data-value="4">4费</span>
            <span class="filter-chip" data-value="5">5费</span>
            <span class="filter-chip" data-value="6">6费</span>
        </div>
    </div>
    <div class="filter-group">
        <div class="filter-label">🔗 羁绊（关键词）</div>
        <input type="text" id="bond-filter-input" class="filter-input" placeholder="输入羁绊名称...">
    </div>
</div>

{| class="wikitable sortable" id="character-table"
! 头像 !! 名称 !! 稀有度 !! 费用 !! 角色技能 !! 羁绊 !! 元素 !! 弱点元素
{{角色图鉴行|图片=角色01.png|名称=天子|稀有度=SR|费用=3费|角色技能=先天下之忧而忧|羁绊=重装战士、游戏开发部|元素=物理|弱点元素=虚数}}
{{角色图鉴行|图片=角色02.png|名称=辛美尔|稀有度=SSR|费用=5费|角色技能=天下大同|羁绊=皇室|元素=光|弱点元素=暗}}
|}

<style>
/* 筛选器样式 */
.filter-container {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 15px 20px;
    margin: 20px 0;
    color: white;
}
.filter-group {
    margin-bottom: 15px;
}
.filter-label {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-chip {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    padding: 6px 16px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.filter-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
.filter-chip.active {
    background: #e67e22;
    color: white;
    box-shadow: 0 2px 6px rgba(230, 126, 34, 0.5);
}
.filter-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px;
    padding: 6px 16px;
    font-size: 0.85em;
    color: white;
    width: 200px;
    outline: none;
    transition: all 0.2s;
}
.filter-input:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: #e67e22;
}
.filter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
/* 表格居中 */
#character-table {
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
}
@media (max-width: 768px) {
    .filter-chip {
        padding: 4px 12px;
        font-size: 0.75em;
    }
    .filter-input {
        width: 100%;
        box-sizing: border-box;
    }
}
</style>

<script>
// 筛选逻辑
(function() {
    function updateFilter() {
        var table = document.getElementById('character-table');
        if (!table) return;
        var rows = table.querySelectorAll('tbody tr');
        var activeRarity = document.querySelector('.filter-buttons[data-filter-type="rarity"] .filter-chip.active')?.getAttribute('data-value') || 'all';
        var activeCost = document.querySelector('.filter-buttons[data-filter-type="cost"] .filter-chip.active')?.getAttribute('data-value') || 'all';
        var bondKeyword = document.getElementById('bond-filter-input')?.value.toLowerCase() || '';

        rows.forEach(function(row) {
            var cells = row.cells;
            if (!cells.length) return;
            var rarity = cells[2]?.innerText.trim() || '';
            var costText = cells[3]?.innerText.trim() || '';
            var bond = cells[5]?.innerText.trim().toLowerCase() || '';

            // 费用提取数字
            var costNum = parseInt(costText.match(/\d+/)?.[0] || '0');
            var costMatch = (activeCost === 'all' || costNum === parseInt(activeCost));

            var rarityMatch = (activeRarity === 'all' || rarity === activeRarity);
            var bondMatch = (bondKeyword === '' || bond.includes(bondKeyword));

            row.style.display = (rarityMatch && costMatch && bondMatch) ? '' : 'none';
        });
    }

    // 绑定稀有度按钮
    document.querySelectorAll('.filter-buttons[data-filter-type="rarity"] .filter-chip').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var parent = this.parentNode;
            parent.querySelectorAll('.filter-chip').forEach(function(c) { c.classList.remove('active'); });
            this.classList.add('active');
            updateFilter();
        });
    });
    // 绑定费用按钮
    document.querySelectorAll('.filter-buttons[data-filter-type="cost"] .filter-chip').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var parent = this.parentNode;
            parent.querySelectorAll('.filter-chip').forEach(function(c) { c.classList.remove('active'); });
            this.classList.add('active');
            updateFilter();
        });
    });
    // 绑定羁绊输入框
    var bondInput = document.getElementById('bond-filter-input');
    if (bondInput) {
        bondInput.addEventListener('input', updateFilter);
    }

    // 初始执行一次，确保表格正确显示
    updateFilter();
})();
</script>