微件:中立&怪物卡牌灵光一闪：修订间差异
来自卡厄思梦境WIKI
创建页面，内容为“<noinclude> 此Widget用于卡牌筛选功能。 </noinclude><includeonly><div id="card-filter-widget-<!--{$id|escape:'html'}-->"> <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;…” |
小无编辑摘要 |
||
| （未显示同一用户的1个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly><div id="card-filter-widget"> | |||
<style> | <style> | ||
.filter-container { | .filter-container { | ||
| 第52行： | 第50行： | ||
.filter-btn-reset:hover { | .filter-btn-reset:hover { | ||
background-color: #da190b; | 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> | </style> | ||
| 第58行： | 第66行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">类型:</span> | <span class="filter-label">类型:</span> | ||
<select class="filter-select" id="filter-type | <select class="filter-select" id="filter-type"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="攻击">攻击</option> | <option value="攻击">攻击</option> | ||
| 第68行： | 第76行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">包含机制:</span> | <span class="filter-label">包含机制:</span> | ||
<select class="filter-select" id="filter-dict-include | <select class="filter-select" id="filter-dict-include"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="消耗">消耗</option> | <option value="消耗">消耗</option> | ||
| 第77行： | 第85行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">排除机制:</span> | <span class="filter-label">排除机制:</span> | ||
<select class="filter-select" id="filter-dict-exclude | <select class="filter-select" id="filter-dict-exclude"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="无法使用">无法使用</option> | <option value="无法使用">无法使用</option> | ||
| 第87行： | 第95行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">职业:</span> | <span class="filter-label">职业:</span> | ||
<select class="filter-select" id="filter-class | <select class="filter-select" id="filter-class"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="决斗家">决斗家</option> | <option value="决斗家">决斗家</option> | ||
| 第100行： | 第108行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">最低费用:</span> | <span class="filter-label">最低费用:</span> | ||
<select class="filter-select" id="filter-cost-min | <select class="filter-select" id="filter-cost-min"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="-1">-1</option> | <option value="-1">-1</option> | ||
| 第113行： | 第121行： | ||
<div class="filter-row"> | <div class="filter-row"> | ||
<span class="filter-label">最高费用:</span> | <span class="filter-label">最高费用:</span> | ||
<select class="filter-select" id="filter-cost-max | <select class="filter-select" id="filter-cost-max"> | ||
<option value="">全部</option> | <option value="">全部</option> | ||
<option value="0">0</option> | <option value="0">0</option> | ||
| 第124行： | 第132行： | ||
<div class="filter-buttons"> | <div class="filter-buttons"> | ||
<div class="filter-btn filter-btn-submit" onclick=" | <div class="filter-btn filter-btn-submit" onclick="applyCardFilter()">筛选</div> | ||
<div class="filter-btn filter-btn-reset" onclick=" | <div class="filter-btn filter-btn-reset" onclick="resetCardFilter()">重置</div> | ||
</div> | </div> | ||
</div> | |||
<div id="current-filters" class="filter-info" style="display:none;"> | |||
<strong>当前筛选:</strong> | |||
<ul id="filter-list"></ul> | |||
</div> | </div> | ||
<script> | <script> | ||
(function() { | (function() { | ||
var | // 检查字符串是否包含某个值（用、分隔） | ||
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() { | function getUrlParams() { | ||
var params = {}; | var params = {}; | ||
| 第147行： | 第267行： | ||
} | } | ||
// | // 初始化表单值并应用筛选 | ||
function initializeFilters() { | function initializeFilters() { | ||
var params = getUrlParams(); | var params = getUrlParams(); | ||
if (params.type) { | if (params.type) { | ||
document.getElementById('filter-type | document.getElementById('filter-type').value = params.type; | ||
} | } | ||
if (params.dict_include) { | if (params.dict_include) { | ||
document.getElementById('filter-dict-include | document.getElementById('filter-dict-include').value = params.dict_include; | ||
} | } | ||
if (params.dict_exclude) { | if (params.dict_exclude) { | ||
document.getElementById('filter-dict-exclude | document.getElementById('filter-dict-exclude').value = params.dict_exclude; | ||
} | } | ||
if (params['class']) { | if (params['class']) { | ||
document.getElementById('filter-class | document.getElementById('filter-class').value = params['class']; | ||
} | } | ||
if (params.cost_min) { | if (params.cost_min) { | ||
document.getElementById('filter-cost-min | document.getElementById('filter-cost-min').value = params.cost_min; | ||
} | } | ||
if (params.cost_max) { | if (params.cost_max) { | ||
document.getElementById('filter-cost-max | document.getElementById('filter-cost-max').value = params.cost_max; | ||
} | } | ||
// 应用筛选 | |||
filterTable(); | |||
} | } | ||
// | // 应用筛选并更新URL | ||
window | window.applyCardFilter = function() { | ||
var params = []; | var params = []; | ||
var baseUrl = window.location.pathname; | var baseUrl = window.location.pathname; | ||
var type = document.getElementById('filter-type | var type = document.getElementById('filter-type').value; | ||
if (type) params.push('type=' + encodeURIComponent(type)); | if (type) params.push('type=' + encodeURIComponent(type)); | ||
var dictInclude = document.getElementById('filter-dict-include | var dictInclude = document.getElementById('filter-dict-include').value; | ||
if (dictInclude) params.push('dict_include=' + encodeURIComponent(dictInclude)); | if (dictInclude) params.push('dict_include=' + encodeURIComponent(dictInclude)); | ||
var dictExclude = document.getElementById('filter-dict-exclude | var dictExclude = document.getElementById('filter-dict-exclude').value; | ||
if (dictExclude) params.push('dict_exclude=' + encodeURIComponent(dictExclude)); | if (dictExclude) params.push('dict_exclude=' + encodeURIComponent(dictExclude)); | ||
var classValue = document.getElementById('filter-class | var classValue = document.getElementById('filter-class').value; | ||
if (classValue) params.push('class=' + encodeURIComponent(classValue)); | if (classValue) params.push('class=' + encodeURIComponent(classValue)); | ||
var costMin = document.getElementById('filter-cost-min | var costMin = document.getElementById('filter-cost-min').value; | ||
if (costMin) params.push('cost_min=' + encodeURIComponent(costMin)); | if (costMin) params.push('cost_min=' + encodeURIComponent(costMin)); | ||
var costMax = document.getElementById('filter-cost-max | var costMax = document.getElementById('filter-cost-max').value; | ||
if (costMax) params.push('cost_max=' + encodeURIComponent(costMax)); | if (costMax) params.push('cost_max=' + encodeURIComponent(costMax)); | ||
| 第199行： | 第322行： | ||
} | } | ||
window.location.href = url; | // 使用 pushState 避免页面刷新 | ||
if (window.history && window.history.pushState) { | |||
window.history.pushState({}, '', url); | |||
filterTable(); | |||
} else { | |||
window.location.href = url; | |||
} | |||
}; | }; | ||
// 重置筛选 | // 重置筛选 | ||
window | window.resetCardFilter = function() { | ||
window.location.href = window.location.pathname; | 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; | |||
} | |||
}; | }; | ||