Common.js：修订间差异
来自卡厄思梦境WIKI
无编辑摘要 |
无编辑摘要 |
||
| 第614行： | 第614行： | ||
// 角色图片切换功能 | // 角色图片切换功能 | ||
function | $(document).ready(function() { | ||
// 使用事件委托来确保动态内容也能响应 | |||
$(document).on('click', '.character-switch-btn', function() { | |||
var targetType = $(this).attr('data-target'); | |||
var container = $(this).closest('#character-container'); | |||
var imageWrapper = container.find('.character-image-wrapper'); | |||
var allImages = imageWrapper.find('.character-image'); | |||
// | // 先将所有图片淡出 | ||
allImages.each(function() { | |||
$(this).css('opacity', '0'); | |||
}); | |||
} | |||
// | // 延迟后切换显示状态 | ||
setTimeout(function() { | |||
allImages.each(function() { | |||
} | $(this).css('display', 'none'); | ||
}); | |||
// 显示目标图片 | |||
imageWrapper.find('[data-image-type="' + targetType + '"]').each(function() { | |||
$(this).css('display', 'block'); | |||
// 强制重绘 | |||
$(this)[0].offsetHeight; | |||
$(this).css('opacity', '1'); | |||
}); | |||
}, 300); | |||
// 更新按钮样式（可选） | |||
container.find('.character-switch-btn').css('background', 'rgba(0,0,0,0.5)'); | |||
$(this).css('background', 'rgba(255,255,255,0.2)'); | |||
}); | |||
}); | |||
2025年9月28日 (日) 18:21的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 切换标签 */
(function() {
'use strict';
function initTabSwitcher() {
var tabContainers = document.querySelectorAll('.resp-tabs');
tabContainers.forEach(function(container) {
var tabButtons = container.querySelectorAll('.czn-list-style');
if (tabButtons.length === 0) return;
// 检测模式
var tabContents = container.querySelectorAll('.resp-tab-content');
var portraitImages = document.querySelectorAll('.portrait-image');
// 初始化
tabButtons.forEach(function(button, index) {
button.classList.toggle('active', index === 0);
});
if (tabContents.length > 0) {
tabContents.forEach(function(content, index) {
content.style.display = index === 0 ? 'block' : 'none';
});
}
if (portraitImages.length > 0) {
portraitImages.forEach(function(image, index) {
image.style.display = index === 0 ? 'block' : 'none';
});
}
// 点击事件
tabButtons.forEach(function(button, index) {
button.addEventListener('click', function(e) {
e.preventDefault();
// 更新标签状态
tabButtons.forEach(function(btn, i) {
btn.classList.toggle('active', i === index);
});
// 传统模式切换
if (tabContents.length > 0) {
tabContents.forEach(function(content, i) {
content.style.display = i === index ? 'block' : 'none';
});
}
// 立绘模式切换
if (portraitImages.length > 0) {
portraitImages.forEach(function(image) {
image.style.display = 'none';
});
var targetImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
if (targetImage) {
targetImage.style.display = 'block';
}
}
});
});
});
}
// 初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTabSwitcher);
} else {
initTabSwitcher();
}
})();
/* 战斗员筛选 */
$(function() {
// 初始化筛选系统
function initFilterSystem() {
// 清理数据并设置属性
$('.战斗员卡片').each(function() {
var $card = $(this);
var rarity = ($card.attr('data-rarity') || '').trim();
var profession = ($card.attr('data-profession') || '').trim();
var attribute = ($card.attr('data-attribute') || '').trim();
$card.attr({
'data-rarity': rarity,
'data-profession': profession,
'data-attribute': attribute
});
});
// 存储当前筛选状态
var activeFilters = {};
// 筛选按钮点击事件
$('.filter-button').off('click').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var group = String($button.data('filter-group'));
var value = String($button.data('filter-value')).trim();
// 切换按钮状态
if (group === '0' && value === '0') {
// 查看全部按钮
$('.filter-button').removeClass('active');
$button.addClass('active');
activeFilters = {};
} else {
// 其他筛选按钮
$('.filter-button[data-filter-group="0"]').removeClass('active');
// 同组内只能选择一个
$('.filter-button[data-filter-group="' + group + '"]').removeClass('active');
if (activeFilters[group] === value) {
// 如果点击已激活的按钮，则取消选择
delete activeFilters[group];
$button.removeClass('active');
} else {
// 激活新的筛选
$button.addClass('active');
activeFilters[group] = value;
}
// 如果没有任何筛选项，激活"查看全部"
if (Object.keys(activeFilters).length === 0) {
$('.filter-button[data-filter-group="0"][data-filter-value="0"]').addClass('active');
}
}
// 应用筛选
applyFilters();
});
// 应用筛选函数
function applyFilters() {
$('.战斗员卡片').each(function() {
var $card = $(this);
var shouldShow = true;
// 检查每个激活的筛选条件
for (var group in activeFilters) {
var filterValue = String(activeFilters[group]).trim();
var cardValue = '';
// 根据组号获取对应的卡片属性
switch(group) {
case '1': // 稀有度
cardValue = String($card.attr('data-rarity') || '').trim();
break;
case '2': // 职业
cardValue = String($card.attr('data-profession') || '').trim();
break;
case '3': // 属性
cardValue = String($card.attr('data-attribute') || '').trim();
break;
default:
cardValue = String($card.attr('data-filter-' + group) || '').trim();
}
if (cardValue !== filterValue) {
shouldShow = false;
break;
}
}
// 显示或隐藏卡片
if (shouldShow) {
$card.fadeIn(200);
} else {
$card.fadeOut(200);
}
});
// 更新显示数量
updateCount();
}
// 更新显示数量
function updateCount() {
var visibleCount = $('.战斗员卡片:visible').length;
var totalCount = $('.战斗员卡片').length;
if ($('#filter-count').length === 0) {
$('.filter-container').prepend('<div id="filter-count"></div>');
}
$('#filter-count').text('显示 ' + visibleCount + ' / ' + totalCount + ' 个战斗员');
}
// 初始化筛选按钮的data属性（清理空格）
$('.filter-button').each(function() {
var $button = $(this);
var value = String($button.data('filter-value') || '').trim();
$button.attr('data-filter-value', value);
});
// 初始化时激活"查看全部"按钮
$('.filter-button[data-filter-group="0"][data-filter-value="0"]').addClass('active');
updateCount();
}
// 等待页面加载完成
var checkInterval = setInterval(function() {
if ($('.战斗员卡片').length > 0 && $('.filter-button').length > 0) {
clearInterval(checkInterval);
initFilterSystem();
}
}, 500);
// 10秒后停止检查
setTimeout(function() {
clearInterval(checkInterval);
}, 10000);
});
/* 卡牌 */
(function() {
// 防止重复初始化
if (window.cardSystemInitialized) return;
window.cardSystemInitialized = true;
// 缓存DOM元素
var overlayCache = null;
var containerCache = null;
// 保存当前卡牌信息，用于返回
var currentCardInfo = null;
// 创建遮罩层和容器（只创建一次）
function createCardOverlay() {
if (overlayCache && containerCache) {
return { overlay: overlayCache, container: containerCache };
}
// 创建遮罩
var overlay = document.createElement('div');
overlay.id = 'card-overlay';
overlay.style.cssText = 'display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; overflow-y: auto;';
// 创建容器
var container = document.createElement('div');
container.id = 'card-display-container';
// 修复：使用 relative 定位，避免左上角显示问题
container.style.cssText = 'position: relative; min-height: 100vh; padding: 40px 20px; display: flex; align-items: center; justify-content: center;';
overlay.appendChild(container);
document.body.appendChild(overlay);
// 点击遮罩关闭
overlay.addEventListener('click', function(e) {
if (e.target === overlay) {
closeCardDisplay();
}
});
overlayCache = overlay;
containerCache = container;
return { overlay: overlay, container: container };
}
// 创建关闭按钮
function createCloseButton() {
var closeBtn = document.createElement('div');
closeBtn.style.cssText = 'position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: 2px solid white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10001; transition: all 0.3s;';
closeBtn.innerHTML = '<span style="color: white; font-size: 24px; font-weight: bold; line-height: 1;">×</span>';
closeBtn.onmouseover = function() {
this.style.background = 'rgba(255,255,255,0.2)';
this.style.transform = 'scale(1.1)';
};
closeBtn.onmouseout = function() {
this.style.background = 'rgba(255,255,255,0.1)';
this.style.transform = 'scale(1)';
};
closeBtn.onclick = function() {
closeCardDisplay();
};
return closeBtn;
}
// 关闭卡牌展示
function closeCardDisplay() {
var overlay = document.getElementById('card-overlay');
if (overlay) {
overlay.style.display = 'none';
var container = overlay.querySelector('#card-display-container');
if (container) {
container.innerHTML = '';
}
}
currentCardInfo = null; // 清空当前卡牌信息
}
// 缓存API调用结果
var apiCache = {};
// 获取卡牌HTML（通过API调用模块）
function fetchCardHTML(character, cardName, deckType, callback) {
var cacheKey = character + '|' + cardName + '|' + (deckType || '');
// 检查缓存
if (apiCache[cacheKey]) {
callback(apiCache[cacheKey]);
return;
}
var api = new mw.Api();
var wikitext = '{{#invoke:卡牌|main|' + character + '|' + cardName + '|' + (deckType || '') + '}}';
api.parse(wikitext).done(function(html) {
apiCache[cacheKey] = html; // 缓存结果
callback(html);
}).fail(function() {
callback('<div style="color: white;">加载失败</div>');
});
}
// 放大显示卡牌
function showEnlargedCard(cardElement) {
var elements = createCardOverlay();
var container = elements.container;
var cardName = cardElement.dataset.cardName;
var character = cardElement.dataset.character;
var deckType = cardElement.dataset.deckType;
var derivedCards = cardElement.dataset.derivedCards;
// 保存当前卡牌信息
currentCardInfo = {
element: cardElement,
cardName: cardName,
character: character,
deckType: deckType,
derivedCards: derivedCards
};
// 重置容器样式
container.style.cssText = 'position: relative; min-height: 100vh; padding: 40px 20px; display: flex; align-items: center; justify-content: center;';
// 创建内容包装器
var contentWrapper = document.createElement('div');
contentWrapper.style.cssText = 'display: flex; align-items: center; gap: 20px; position: relative;';
// 创建主卡牌容器
var mainCardContainer = document.createElement('div');
mainCardContainer.style.cssText = 'position: relative; width: 336px; height: 460px; display: flex; align-items: center; justify-content: center;';
// 克隆并放大主卡牌
var enlargedCard = cardElement.cloneNode(true);
// 修复放大卡牌的样式
var cardInner = document.createElement('div');
cardInner.style.cssText = 'transform: scale(2); position: relative;';
cardInner.appendChild(enlargedCard);
// 确保卡牌正确显示
enlargedCard.style.width = '168px';
enlargedCard.style.height = '230px';
enlargedCard.style.cursor = 'default';
enlargedCard.style.position = 'relative';
enlargedCard.style.display = 'block';
enlargedCard.onclick = null;
mainCardContainer.appendChild(cardInner);
// 处理衍生卡牌
if (derivedCards && derivedCards.trim() !== '') {
var derivedCardsList = derivedCards.split('、');
// 创建左侧容器
var leftContainer = document.createElement('div');
leftContainer.style.cssText = 'display: flex; flex-direction: column; gap: 15px; align-items: flex-end;';
if (derivedCardsList.length > 1) {
// 多张衍生卡牌，添加查看所有按钮
var viewAllBtn = document.createElement('div');
viewAllBtn.style.cssText = 'padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s;';
viewAllBtn.textContent = '查看所有衍生卡牌';
viewAllBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
viewAllBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
viewAllBtn.onclick = function() {
showAllDerivedCards(character, derivedCardsList);
};
leftContainer.appendChild(viewAllBtn);
}
// 显示第一张衍生卡牌
var firstDerivedCard = document.createElement('div');
firstDerivedCard.id = 'derived-cards-display';
firstDerivedCard.style.cssText = 'display: flex; align-items: center;';
fetchCardHTML(character, derivedCardsList[0].trim(), '', function(html) {
firstDerivedCard.innerHTML = html;
var cards = firstDerivedCard.querySelectorAll('.game-card');
cards.forEach(function(card) {
card.style.cursor = 'default';
card.onclick = null;
});
});
leftContainer.appendChild(firstDerivedCard);
contentWrapper.appendChild(leftContainer);
}
contentWrapper.appendChild(mainCardContainer);
// 创建按钮容器（放在主卡牌下方）
var buttonsContainer = document.createElement('div');
buttonsContainer.style.cssText = 'position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; white-space: nowrap;';
// 预加载按钮，避免延迟
checkCardVariants(character, cardName, function(variants) {
if (variants.lingguang) {
var lingguangBtn = document.createElement('div');
lingguangBtn.style.cssText = 'padding: 10px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; white-space: nowrap; min-width: 120px; text-align: center;';
lingguangBtn.textContent = '灵光一闪';
lingguangBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
lingguangBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
lingguangBtn.onclick = function() {
showVariantCards(character, cardName, '灵光一闪');
};
buttonsContainer.appendChild(lingguangBtn);
}
if (variants.shenguang) {
var shenguangBtn = document.createElement('div');
shenguangBtn.style.cssText = 'padding: 10px 30px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; white-space: nowrap; min-width: 120px; text-align: center;';
shenguangBtn.textContent = '神之一闪';
shenguangBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
shenguangBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
shenguangBtn.onclick = function() {
showVariantCards(character, cardName, '神之一闪');
};
buttonsContainer.appendChild(shenguangBtn);
}
});
mainCardContainer.appendChild(buttonsContainer);
container.innerHTML = '';
container.appendChild(contentWrapper);
// 添加关闭按钮
container.appendChild(createCloseButton());
elements.overlay.style.display = 'block';
}
// 显示所有衍生卡牌
function showAllDerivedCards(character, derivedCardsList) {
var overlay = document.getElementById('card-overlay');
var container = document.getElementById('card-display-container');
// 清空当前内容
container.innerHTML = '';
container.style.cssText = 'position: relative; padding: 40px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;';
// 创建标题
var title = document.createElement('div');
title.style.cssText = 'color: white; font-size: 28px; font-weight: bold; margin-bottom: 30px; text-align: center;';
title.textContent = '衍生卡牌';
container.appendChild(title);
// 创建卡牌容器
var cardsContainer = document.createElement('div');
cardsContainer.style.cssText = 'display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; max-width: 1200px;';
// 加载所有衍生卡牌
var uniqueCards = [...new Set(derivedCardsList.map(function(name) { return name.trim(); }))];
var loadedCount = 0;
uniqueCards.forEach(function(cardName) {
fetchCardHTML(character, cardName, '', function(html) {
var cardWrapper = document.createElement('div');
cardWrapper.innerHTML = html;
var cards = cardWrapper.querySelectorAll('.game-card');
cards.forEach(function(card) {
card.style.cursor = 'default';
card.onclick = null;
cardsContainer.appendChild(card);
});
loadedCount++;
if (loadedCount === uniqueCards.length) {
// 所有卡牌加载完成
}
});
});
container.appendChild(cardsContainer);
// 添加返回按钮（返回到放大的卡牌页面）
var backBtn = document.createElement('div');
backBtn.style.cssText = 'position: fixed; top: 20px; left: 20px; padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 10001;';
backBtn.textContent = '← 返回';
backBtn.onclick = function() {
// 返回到放大的卡牌页面
if (currentCardInfo && currentCardInfo.element) {
showEnlargedCard(currentCardInfo.element);
}
};
container.appendChild(backBtn);
// 添加关闭按钮
container.appendChild(createCloseButton());
}
// 检查卡牌变体（优化版）
function checkCardVariants(character, cardName, callback) {
var variants = { lingguang: false, shenguang: false };
var checkCount = 0;
var totalChecks = 2;
function checkComplete() {
checkCount++;
if (checkCount === totalChecks) {
callback(variants);
}
}
// 并行检查两种变体
fetchCardHTML(character, cardName, '灵光一闪', function(html) {
if (html && !html.includes('找不到卡组')) {
variants.lingguang = true;
}
checkComplete();
});
fetchCardHTML(character, cardName, '神之一闪', function(html) {
if (html && !html.includes('找不到卡组')) {
variants.shenguang = true;
}
checkComplete();
});
}
// 显示变体卡牌
function showVariantCards(character, cardName, variantType) {
var overlay = document.getElementById('card-overlay');
var container = document.getElementById('card-display-container');
// 重置容器样式
container.style.cssText = 'position: relative; padding: 40px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;';
container.innerHTML = '';
// 创建标题
var title = document.createElement('div');
title.style.cssText = 'color: white; font-size: 28px; font-weight: bold; margin-bottom: 30px; text-align: center; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;';
title.textContent = cardName + ' - ' + variantType;
container.appendChild(title);
// 创建卡牌容器（增大宽度以容纳5张卡牌）
var cardsContainer = document.createElement('div');
cardsContainer.style.cssText = 'display: flex; flex-wrap: nowrap; gap: 15px; justify-content: center; max-width: 1200px; overflow-x: auto; padding: 20px;';
// 加载变体卡牌
fetchCardHTML(character, cardName, variantType, function(html) {
cardsContainer.innerHTML = html;
// 移除所有卡牌的点击事件
var cards = cardsContainer.querySelectorAll('.game-card');
cards.forEach(function(card) {
card.style.cursor = 'default';
card.onclick = null;
card.style.flexShrink = '0'; // 防止卡牌缩小
});
});
container.appendChild(cardsContainer);
// 添加返回按钮（返回到放大的卡牌页面）
var backBtn = document.createElement('div');
backBtn.style.cssText = 'position: fixed; top: 20px; left: 20px; padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 10001; transition: transform 0.2s;';
backBtn.textContent = '← 返回';
backBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
backBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
backBtn.onclick = function() {
// 返回到放大的卡牌页面
if (currentCardInfo && currentCardInfo.element) {
showEnlargedCard(currentCardInfo.element);
}
};
container.appendChild(backBtn);
// 添加关闭按钮
container.appendChild(createCloseButton());
}
// 初始化卡牌点击事件
function initCardClickEvents() {
// 使用事件委托
document.addEventListener('click', function(e) {
var card = e.target.closest('.game-card');
if (card && !card.closest('#card-overlay')) {
e.preventDefault();
e.stopPropagation();
showEnlargedCard(card);
}
});
}
// 页面加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
initCardClickEvents();
});
} else {
initCardClickEvents();
}
})();
// 角色图片切换功能
$(document).ready(function() {
// 使用事件委托来确保动态内容也能响应
$(document).on('click', '.character-switch-btn', function() {
var targetType = $(this).attr('data-target');
var container = $(this).closest('#character-container');
var imageWrapper = container.find('.character-image-wrapper');
var allImages = imageWrapper.find('.character-image');
// 先将所有图片淡出
allImages.each(function() {
$(this).css('opacity', '0');
});
// 延迟后切换显示状态
setTimeout(function() {
allImages.each(function() {
$(this).css('display', 'none');
});
// 显示目标图片
imageWrapper.find('[data-image-type="' + targetType + '"]').each(function() {
$(this).css('display', 'block');
// 强制重绘
$(this)[0].offsetHeight;
$(this).css('opacity', '1');
});
}, 300);
// 更新按钮样式（可选）
container.find('.character-switch-btn').css('background', 'rgba(0,0,0,0.5)');
$(this).css('background', 'rgba(255,255,255,0.2)');
});
});