查看“︁微件:中立&怪物卡牌灵光一闪”︁的源代码

<includeonly><div id="card-filter-widget">
    <style>
        .filter-container {
            background-color: #f9f9f9;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .filter-row {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .filter-label {
            font-weight: bold;
            width: 120px;
            display: inline-block;
        }
        .filter-select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            min-width: 150px;
        }
        .filter-buttons {
            text-align: center;
            margin-top: 15px;
        }
        .filter-btn {
            padding: 8px 20px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: inline-block;
        }
        .filter-btn-submit {
            background-color: #4CAF50;
            color: white;
        }
        .filter-btn-submit:hover {
            background-color: #45a049;
        }
        .filter-btn-reset {
            background-color: #f44336;
            color: white;
        }
        .filter-btn-reset:hover {
            background-color: #da190b;
        }
        .filter-info {
            background-color: #e7f3fe;
            padding: 10px;
            margin: 10px 0;
            border-left: 4px solid #2196F3;
        }
        .filter-info ul {
            margin: 5px 0;
            padding-left: 20px;
        }
    </style>
    
    <div class="filter-container">
        <div class="filter-row">
            <span class="filter-label">类型:</span>
            <select class="filter-select" id="filter-type">
                <option value="">全部</option>
                <option value="攻击">攻击</option>
                <option value="技能">技能</option>
                <option value="强化">强化</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">包含机制:</span>
            <select class="filter-select" id="filter-dict-include">
                <option value="">全部</option>
                <option value="消耗">消耗</option>
                <option value="终极">终极</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">排除机制:</span>
            <select class="filter-select" id="filter-dict-exclude">
                <option value="">全部</option>
                <option value="无法使用">无法使用</option>
                <option value="消耗">消耗</option>
                <option value="终极">终极</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">职业:</span>
            <select class="filter-select" id="filter-class">
                <option value="">全部</option>
                <option value="决斗家">决斗家</option>
                <option value="游侠">游侠</option>
                <option value="猎人">猎人</option>
                <option value="心灵术士">心灵术士</option>
                <option value="控制师">控制师</option>
                <option value="先锋">先锋</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">最低费用:</span>
            <select class="filter-select" id="filter-cost-min">
                <option value="">全部</option>
                <option value="-1">-1</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">最高费用:</span>
            <select class="filter-select" id="filter-cost-max">
                <option value="">全部</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="99">99</option>
            </select>
        </div>
        
        <div class="filter-buttons">
            <div class="filter-btn filter-btn-submit" onclick="applyCardFilter()">筛选</div>
            <div class="filter-btn filter-btn-reset" onclick="resetCardFilter()">重置</div>
        </div>
    </div>
    
    <div id="current-filters" class="filter-info" style="display:none;">
        <strong>当前筛选:</strong>
        <ul id="filter-list"></ul>
    </div>
    
    <script>
        (function() {
            // 检查字符串是否包含某个值（用、分隔）
            function contains(str, value) {
                if (!str || !value) return false;
                var items = str.split('、');
                return items.indexOf(value) !== -1;
            }
            
            // 应用筛选到表格
            function filterTable() {
                var type = document.getElementById('filter-type').value;
                var dictInclude = document.getElementById('filter-dict-include').value;
                var dictExclude = document.getElementById('filter-dict-exclude').value;
                var classValue = document.getElementById('filter-class').value;
                var costMin = document.getElementById('filter-cost-min').value;
                var costMax = document.getElementById('filter-cost-max').value;
                
                var table = document.getElementById('card-results-table');
                if (!table) return;
                
                var rows = table.getElementsByTagName('tr');
                var visibleCount = 0;
                
                // 从第二行开始（跳过表头）
                for (var i = 1; i < rows.length; i++) {
                    var row = rows[i];
                    var show = true;
                    
                    // 筛选类型
                    if (type && show) {
                        var rowType = row.getAttribute('data-type') || '';
                        if (!contains(rowType, type)) {
                            show = false;
                        }
                    }
                    
                    // 筛选包含机制
                    if (dictInclude && show) {
                        var rowDictInclude = row.getAttribute('data-dict-include') || '';
                        if (!contains(rowDictInclude, dictInclude)) {
                            show = false;
                        }
                    }
                    
                    // 筛选排除机制
                    if (dictExclude && show) {
                        var rowDictExclude = row.getAttribute('data-dict-exclude') || '';
                        if (!contains(rowDictExclude, dictExclude)) {
                            show = false;
                        }
                    }
                    
                    // 筛选职业
                    if (classValue && show) {
                        var rowClass = row.getAttribute('data-class') || '';
                        if (!contains(rowClass, classValue)) {
                            show = false;
                        }
                    }
                    
                    // 筛选费用
                    if (show) {
                        var rowCostMin = parseInt(row.getAttribute('data-cost-min'));
                        var rowCostMax = parseInt(row.getAttribute('data-cost-max'));
                        
                        if (costMin && rowCostMin < parseInt(costMin)) {
                            show = false;
                        }
                        if (costMax && rowCostMax > parseInt(costMax)) {
                            show = false;
                        }
                    }
                    
                    row.style.display = show ? '' : 'none';
                    if (show) visibleCount++;
                }
                
                // 更新结果计数
                var countDiv = document.getElementById('result-count');
                if (countDiv) {
                    countDiv.innerHTML = "<em>共 " + visibleCount + " 条结果</em>";
                }
                
                // 显示当前筛选条件
                showCurrentFilters(type, dictInclude, dictExclude, classValue, costMin, costMax);
            }
            
            // 显示当前筛选条件
            function showCurrentFilters(type, dictInclude, dictExclude, classValue, costMin, costMax) {
                var filterDiv = document.getElementById('current-filters');
                var filterList = document.getElementById('filter-list');
                
                if (!filterDiv || !filterList) return;
                
                var filters = [];
                if (type) filters.push('<li>类型: ' + type + '</li>');
                if (dictInclude) filters.push('<li>包含机制: ' + dictInclude + '</li>');
                if (dictExclude) filters.push('<li>排除机制: ' + dictExclude + '</li>');
                if (classValue) filters.push('<li>职业: ' + classValue + '</li>');
                if (costMin) filters.push('<li>最低费用: ' + costMin + '</li>');
                if (costMax) filters.push('<li>最高费用: ' + costMax + '</li>');
                
                if (filters.length > 0) {
                    filterList.innerHTML = filters.join('');
                    filterDiv.style.display = 'block';
                } else {
                    filterDiv.style.display = 'none';
                }
            }
            
            // 获取URL参数
            function getUrlParams() {
                var params = {};
                var search = window.location.search.substring(1);
                if (search) {
                    var pairs = search.split('&');
                    for (var i = 0; i < pairs.length; i++) {
                        var pair = pairs[i].split('=');
                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
                    }
                }
                return params;
            }
            
            // 初始化表单值并应用筛选
            function initializeFilters() {
                var params = getUrlParams();
                
                if (params.type) {
                    document.getElementById('filter-type').value = params.type;
                }
                if (params.dict_include) {
                    document.getElementById('filter-dict-include').value = params.dict_include;
                }
                if (params.dict_exclude) {
                    document.getElementById('filter-dict-exclude').value = params.dict_exclude;
                }
                if (params['class']) {
                    document.getElementById('filter-class').value = params['class'];
                }
                if (params.cost_min) {
                    document.getElementById('filter-cost-min').value = params.cost_min;
                }
                if (params.cost_max) {
                    document.getElementById('filter-cost-max').value = params.cost_max;
                }
                
                // 应用筛选
                filterTable();
            }
            
            // 应用筛选并更新URL
            window.applyCardFilter = function() {
                var params = [];
                var baseUrl = window.location.pathname;
                
                var type = document.getElementById('filter-type').value;
                if (type) params.push('type=' + encodeURIComponent(type));
                
                var dictInclude = document.getElementById('filter-dict-include').value;
                if (dictInclude) params.push('dict_include=' + encodeURIComponent(dictInclude));
                
                var dictExclude = document.getElementById('filter-dict-exclude').value;
                if (dictExclude) params.push('dict_exclude=' + encodeURIComponent(dictExclude));
                
                var classValue = document.getElementById('filter-class').value;
                if (classValue) params.push('class=' + encodeURIComponent(classValue));
                
                var costMin = document.getElementById('filter-cost-min').value;
                if (costMin) params.push('cost_min=' + encodeURIComponent(costMin));
                
                var costMax = document.getElementById('filter-cost-max').value;
                if (costMax) params.push('cost_max=' + encodeURIComponent(costMax));
                
                var url = baseUrl;
                if (params.length > 0) {
                    url += '?' + params.join('&');
                }
                
                // 使用 pushState 避免页面刷新
                if (window.history && window.history.pushState) {
                    window.history.pushState({}, '', url);
                    filterTable();
                } else {
                    window.location.href = url;
                }
            };
            
            // 重置筛选
            window.resetCardFilter = function() {
                document.getElementById('filter-type').value = '';
                document.getElementById('filter-dict-include').value = '';
                document.getElementById('filter-dict-exclude').value = '';
                document.getElementById('filter-class').value = '';
                document.getElementById('filter-cost-min').value = '';
                document.getElementById('filter-cost-max').value = '';
                
                if (window.history && window.history.pushState) {
                    window.history.pushState({}, '', window.location.pathname);
                    filterTable();
                } else {
                    window.location.href = window.location.pathname;
                }
            };
            
            // 页面加载时初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeFilters);
            } else {
                initializeFilters();
            }
        })();
    </script>
</div></includeonly>