MediaWiki:Common.js:修订间差异
来自勿忘草与永远的少女
跳到导航跳到搜索
无编辑摘要 |
无编辑摘要 标签:已被回退 |
||
| 第87行: | 第87行: | ||
}); | }); | ||
/ | // 羁绊筛选器 | ||
(function() { | |||
// 固定的羁绊列表(按你游戏的实际值改) | |||
var | const BOND_LIST = ['全部', '法师', '圣盾战士', '死亡笔记', '世界的加护', '圆环之理', '冰之魔女']; | ||
if ( | |||
function initChessFilter() { | |||
// | var container = document.getElementById('chess-table'); | ||
var | if (!container) return; | ||
var | |||
var | // 找到 Cargo 生成的表格 | ||
var | var table = container.querySelector('table.cargoDynamicTable'); | ||
if ( | if (!table) return; | ||
// 找到表头中“羁绊”那一列的 select | |||
var headerCells = table.querySelectorAll('thead th'); | |||
var targetSelect = null; | |||
var bondColumnIndex = -1; | |||
headerCells.forEach(function(th, idx) { | |||
var select = th.querySelector('select'); | |||
// Cargo 会在 th 上加 data-field 属性,可以用这个匹配 | |||
if (select && th.getAttribute('data-field') === '羁绊') { | |||
targetSelect = select; | |||
bondColumnIndex = idx; | |||
} | |||
}); | |||
if (!targetSelect || bondColumnIndex === -1) return; | |||
// 1) 替换下拉选项为固定羁绊 | |||
targetSelect.innerHTML = ''; | |||
BOND_LIST.forEach(function(bond) { | |||
var opt = document.createElement('option'); | |||
opt.value = bond; | |||
opt.textContent = bond; | |||
targetSelect.appendChild(opt); | |||
}); | |||
targetSelect.value = '全部'; // 默认选中“全部” | |||
// 2) 解除 Cargo 原有的筛选事件,绑上我们自己的筛选逻辑 | |||
targetSelect.onchange = null; // 干掉原有事件(如果它是通过属性绑定的) | |||
// 为防止 Cargo 使用的是 addEventListener,我们克隆节点替换 | |||
var newSelect = targetSelect.cloneNode(true); | |||
targetSelect.parentNode.replaceChild(newSelect, targetSelect); | |||
// 重新获取新 select 引用 | |||
targetSelect = newSelect; | |||
// 获取所有数据行 | |||
var tbody = table.querySelector('tbody'); | |||
var rows = tbody.querySelectorAll('tr'); | |||
// 筛选函数 | |||
function filterBond() { | |||
var selected = targetSelect.value; | |||
rows.forEach(function(row) { | |||
var cells = row.querySelectorAll('td'); | |||
if (cells.length <= bondColumnIndex) return; | |||
var bondCell = cells[bondColumnIndex]; | |||
var bondText = bondCell.textContent.trim(); | |||
if (selected === '全部') { | |||
row.style.display = ''; | |||
return; | |||
} | } | ||
// 将单元格内的羁绊按逗号、顿号拆开,判断是否包含所选羁绊 | |||
var bonds = bondText.split(/[,,、]/).map(function(s) { return s.trim(); }); | |||
if (bonds.indexOf(selected) !== -1) { | |||
row.style.display = ''; | |||
} else { | |||
// | row.style.display = 'none'; | ||
} | } | ||
}); | |||
} | |||
targetSelect.addEventListener('change', filterBond); | |||
// 如果需要,可以立即执行一次确保初始状态(默认“全部”不必) | |||
} | |||
// 页面加载后执行 | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initChessFilter); | |||
} else { | |||
initChessFilter(); | |||
} | |||
})(); | |||
/* ========== 装备图鉴筛选功能(仅类型、获取方式) ========== */ | /* ========== 装备图鉴筛选功能(仅类型、获取方式) ========== */ | ||
2026年5月10日 (日) 08:18的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
$(function() {
// 检查是否已存在导航栏,避免重复添加
if ($('.fixed-top-nav').length === 0) {
// 导航栏 HTML 结构
var navHtml = `
<div class="fixed-top-nav">
<a href="首页" class="nav-logo">
<img src="/wikibg/logo.jpg" alt="网站Logo">
<span>万华镜</span>
</a>
<div class="nav-links">
<a href="首页" class="nav-link">
📚 首页
</a>
<a href="游戏攻略" class="nav-link">
📖 游戏攻略
</a>
<a href="棋子" class="nav-link">
⚔️ 棋子图鉴
</a>
<a href="天赋图鉴" class="nav-link">
🗺️ 天赋图鉴
</a>
<a href="装备图鉴" class="nav-link">
📊 装备图鉴
</a>
<a href="https://www.war3whj.top/war3wiki/moniqi/moniqi.html" class="nav-link">
📊 阵容模拟器
</a>
</div>
</div>
`;
// 将导航栏插入到 body 开头
$('body').prepend(navHtml);
// 滚动时添加效果(可选)
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('.fixed-top-nav').addClass('scrolled');
} else {
$('.fixed-top-nav').removeClass('scrolled');
}
});
}
});
$(function() {
// 确保页脚固定在底部
var footer = $('#footer, .mw-footer');
if (footer.length > 0) {
// 设置底部内边距避免内容被遮挡
var footerHeight = footer.outerHeight();
$('body').css('padding-bottom', footerHeight + 20 + 'px');
// 窗口大小改变时重新计算
$(window).resize(function() {
var newHeight = footer.outerHeight();
$('body').css('padding-bottom', newHeight + 20 + 'px');
});
}
});
$(function() {
// 为角色卡片添加悬停效果(可选,纯CSS已有,这里作为备用)
$('.character-card').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
// 动态计算右侧边栏高度(可选,用于对齐)
function adjustSidebarHeight() {
var leftHeight = $('.custom-homepage .left-column').outerHeight();
var rightHeight = $('.custom-homepage .right-column').outerHeight();
if (rightHeight < leftHeight && $(window).width() > 768) {
$('.custom-homepage .right-column').css('min-height', leftHeight);
}
}
// 延迟执行,等待图片加载完成
setTimeout(adjustSidebarHeight, 500);
$(window).resize(adjustSidebarHeight);
});
// 羁绊筛选器
(function() {
// 固定的羁绊列表(按你游戏的实际值改)
const BOND_LIST = ['全部', '法师', '圣盾战士', '死亡笔记', '世界的加护', '圆环之理', '冰之魔女'];
function initChessFilter() {
var container = document.getElementById('chess-table');
if (!container) return;
// 找到 Cargo 生成的表格
var table = container.querySelector('table.cargoDynamicTable');
if (!table) return;
// 找到表头中“羁绊”那一列的 select
var headerCells = table.querySelectorAll('thead th');
var targetSelect = null;
var bondColumnIndex = -1;
headerCells.forEach(function(th, idx) {
var select = th.querySelector('select');
// Cargo 会在 th 上加 data-field 属性,可以用这个匹配
if (select && th.getAttribute('data-field') === '羁绊') {
targetSelect = select;
bondColumnIndex = idx;
}
});
if (!targetSelect || bondColumnIndex === -1) return;
// 1) 替换下拉选项为固定羁绊
targetSelect.innerHTML = '';
BOND_LIST.forEach(function(bond) {
var opt = document.createElement('option');
opt.value = bond;
opt.textContent = bond;
targetSelect.appendChild(opt);
});
targetSelect.value = '全部'; // 默认选中“全部”
// 2) 解除 Cargo 原有的筛选事件,绑上我们自己的筛选逻辑
targetSelect.onchange = null; // 干掉原有事件(如果它是通过属性绑定的)
// 为防止 Cargo 使用的是 addEventListener,我们克隆节点替换
var newSelect = targetSelect.cloneNode(true);
targetSelect.parentNode.replaceChild(newSelect, targetSelect);
// 重新获取新 select 引用
targetSelect = newSelect;
// 获取所有数据行
var tbody = table.querySelector('tbody');
var rows = tbody.querySelectorAll('tr');
// 筛选函数
function filterBond() {
var selected = targetSelect.value;
rows.forEach(function(row) {
var cells = row.querySelectorAll('td');
if (cells.length <= bondColumnIndex) return;
var bondCell = cells[bondColumnIndex];
var bondText = bondCell.textContent.trim();
if (selected === '全部') {
row.style.display = '';
return;
}
// 将单元格内的羁绊按逗号、顿号拆开,判断是否包含所选羁绊
var bonds = bondText.split(/[,,、]/).map(function(s) { return s.trim(); });
if (bonds.indexOf(selected) !== -1) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
targetSelect.addEventListener('change', filterBond);
// 如果需要,可以立即执行一次确保初始状态(默认“全部”不必)
}
// 页面加载后执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initChessFilter);
} else {
initChessFilter();
}
})();
/* ========== 装备图鉴筛选功能(仅类型、获取方式) ========== */
$(function() {
// 判断是否为装备图鉴页面
var pageTitle = mw.config.get('wgTitle');
if (pageTitle !== '装备图鉴') return;
// 等待 Cargo 表格出现(最多等待 5 秒)
var maxAttempts = 50;
var attempt = 0;
var interval = setInterval(function() {
var $table = $('table.cargoDynamicTable, table.cargoTable');
if ($table.length > 0) {
clearInterval(interval);
initEquipmentFilters($table);
} else if (++attempt >= maxAttempts) {
clearInterval(interval);
console.warn('装备图鉴筛选器:未找到 Cargo 表格');
}
}, 200);
function initEquipmentFilters($table) {
var $rows = $table.find('tbody tr');
if ($rows.length === 0) return;
// 避免重复创建筛选器
if ($('#equipment-filter-container').length) return;
// 通过表头动态获取列索引(更稳健)
var headerCells = $table.find('thead tr th');
var colMap = {};
headerCells.each(function(index) {
var text = $(this).text().trim();
if (text.includes('类型')) colMap.type = index;
else if (text.includes('获取方式')) colMap.source = index;
});
// 回退到固定索引(根据您的 fields 顺序:图片,图片文件名,名称,_pageName,类型,获取方式,合成公式)
var COL_TYPE = colMap.type !== undefined ? colMap.type : 4; // 类型
var COL_SOURCE = colMap.source !== undefined ? colMap.source : 5; // 获取方式
// 从表格提取唯一值
function getUniqueValues(colIndex) {
var set = new Set();
$rows.each(function() {
var text = $(this).find('td').eq(colIndex).text().trim();
if (text) set.add(text);
});
return Array.from(set).sort(function(a, b) {
return a.localeCompare(b, 'zh-CN');
});
}
var typeOpts = getUniqueValues(COL_TYPE);
var sourceOpts = getUniqueValues(COL_SOURCE);
// 构建筛选器容器
var $filterDiv = $('<div id="equipment-filter-container" style="margin:20px 0;padding:15px;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);"></div>');
var $rowDiv = $('<div style="display:flex;flex-wrap:wrap;gap:15px;align-items:flex-end;"></div>');
// 创建下拉框的辅助函数
function createSelect(labelText, id, optionsArray) {
var $wrapper = $('<div style="min-width:160px;"></div>');
$wrapper.append($('<label style="display:block;font-weight:bold;margin-bottom:5px;color:#2c3e50;">').text(labelText));
var $select = $('<select style="width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;">').attr('id', id);
$select.append($('<option value="">').text('全部'));
optionsArray.forEach(function(val) {
$select.append($('<option>').attr('value', val).text(val));
});
$wrapper.append($select);
return $wrapper;
}
$rowDiv.append(createSelect('📦 类型', 'filter-type', typeOpts));
$rowDiv.append(createSelect('🔍 获取方式', 'filter-source', sourceOpts));
var $btnWrapper = $('<div></div>');
var $resetBtn = $('<button id="reset-equipment-filters" style="padding:6px 20px;background:#2c3e50;color:#fff;border:none;border-radius:20px;cursor:pointer;font-weight:bold;">重置筛选</button>');
$btnWrapper.append($resetBtn);
$rowDiv.append($btnWrapper);
var $stats = $('<div id="equipment-filter-stats" style="margin-top:10px;font-size:14px;color:#555;"></div>');
$filterDiv.append($rowDiv).append($stats);
// 插入到表格前
$table.before($filterDiv);
// 绑定筛选逻辑
var $typeSelect = $('#filter-type');
var $sourceSelect = $('#filter-source');
function applyFilters() {
var type = $typeSelect.val() || '';
var source = $sourceSelect.val() || '';
var visibleCount = 0;
$rows.each(function() {
var $tds = $(this).find('td');
var rowType = $tds.eq(COL_TYPE).text().trim();
var rowSource = $tds.eq(COL_SOURCE).text().trim();
var match = true;
if (type && rowType !== type) match = false;
if (source && rowSource !== source) match = false;
if (match) {
$(this).show();
visibleCount++;
} else {
$(this).hide();
}
});
$stats.text('当前显示 ' + visibleCount + ' 件装备(共 ' + $rows.length + ' 件)');
// 无结果时添加提示行
var $noRow = $table.find('.no-results-row');
if (visibleCount === 0) {
if ($noRow.length === 0) {
var colSpan = $table.find('thead tr th').length;
$table.find('tbody').append(
$('<tr class="no-results-row">').append(
$('<td>').attr('colspan', colSpan).css({
'text-align': 'center',
'padding': '20px',
'color': '#999'
}).text('没有符合条件的装备')
)
);
}
} else {
$noRow.remove();
}
}
$typeSelect.on('change', applyFilters);
$sourceSelect.on('change', applyFilters);
$('#reset-equipment-filters').on('click', function() {
$typeSelect.val('');
$sourceSelect.val('');
applyFilters();
});
// 初始统计
applyFilters();
}
});