棋子

   ⚔️ 棋子图鉴 ⚔️

点击棋子名称可跳转至详情页

✨ 稀有度

           全部
           SSR
           SR
           R
           N

💰 费用

           全部
           1费
           2费
           3费
           4费
           5费
           6费

🔗 羁绊（关键词）

       <input type="text" id="bond-filter-input" class="filter-input" placeholder="输入羁绊名称...">

头像	名称	稀有度	费用	角色技能	羁绊	元素	弱点元素
角色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);

} /* 表格居中 */

1. 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>