无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的4个中间版本) | |||
第1行: | 第1行: | ||
// 添加新按钮 | // 添加新按钮 | ||
function addToggleButton() { | function addToggleButton() { | ||
var navbarNav = document.querySelector('ul.nav.navbar-nav'); | |||
if (!navbarNav) { | if (!navbarNav) { | ||
console.error('未找到 ul.nav.navbar-nav 元素'); | console.error('未找到 ul.nav.navbar-nav 元素'); | ||
return null; | return null; | ||
} | } | ||
var newButton = document.createElement('li'); | |||
newButton.className = 'dropdown nav-item'; | newButton.className = 'dropdown nav-item'; | ||
newButton.innerHTML = | newButton.innerHTML = | ||
<a class="nav-link" role="button" title="切换版本" href="#" id="toggleButton"> | '<a class="nav-link" role="button" title="切换版本" href="#" id="toggleButton">' + | ||
<span class="fa fa-exchange"></span> | '<span class="fa fa-exchange"></span>' + | ||
<span class="hide-title">切换版本</span> | '<span class="hide-title">切换版本</span>' + | ||
</a> | '</a>'; | ||
navbarNav.appendChild(newButton); | navbarNav.appendChild(newButton); | ||
console.log('新按钮已添加到导航栏'); | console.log('新按钮已添加到导航栏'); | ||
第21行: | 第20行: | ||
// 切换显示/隐藏类 | // 切换显示/隐藏类 | ||
function toggleClasses(showHOTA) { | function toggleClasses(showHOTA) { | ||
var hotaElements = document.querySelectorAll('.onlyhota'); | |||
var sodElements = document.querySelectorAll('.onlysod'); | |||
hotaElements. | for (var i = 0; i < hotaElements.length; i++) { | ||
sodElements. | hotaElements[i].style.display = showHOTA ? '' : 'none'; | ||
} | |||
for (var j = 0; j < sodElements.length; j++) { | |||
sodElements[j].style.display = showHOTA ? 'none' : ''; | |||
} | |||
} | |||
// 切换显示/隐藏类 | |||
function toggleTemplate(showHOTA) { | |||
// 获取 #mw-customcollapsible-hota 下的 .mw-collapsible-content 元素 | |||
var hotaElements = document.querySelectorAll('#mw-customcollapsible-hota .mw-collapsible-content'); | |||
// 获取 #mw-customcollapsible-sod 下的 .mw-collapsible-content 元素 | |||
var sodElements = document.querySelectorAll('#mw-customcollapsible-sod .mw-collapsible-content'); | |||
// 切换 HOTA 模板内容的显示/隐藏 | |||
for (var i = 0; i < hotaElements.length; i++) { | |||
hotaElements[i].style.display = showHOTA ? '' : 'none'; | |||
} | |||
// 切换 SOD 模板内容的显示/隐藏 | |||
for (var j = 0; j < sodElements.length; j++) { | |||
sodElements[j].style.display = showHOTA ? 'none' : ''; | |||
} | |||
} | } | ||
// 设置Cookie | // 设置Cookie | ||
function setCookie(name, value, days) { | function setCookie(name, value, days) { | ||
var expires = new Date(Date.now() + days * 864e5).toUTCString(); | |||
document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/'; | document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/'; | ||
} | } | ||
第36行: | 第57行: | ||
// 获取Cookie | // 获取Cookie | ||
function getCookie(name) { | function getCookie(name) { | ||
return document.cookie.split('; ').reduce((r, v) | return document.cookie.split('; ').reduce(function(r, v) { | ||
var parts = v.split('='); | |||
return parts[0] === name ? decodeURIComponent(parts[1]) : r; | return parts[0] === name ? decodeURIComponent(parts[1]) : r; | ||
}, ''); | }, ''); | ||
第44行: | 第65行: | ||
// 主函数 | // 主函数 | ||
function initToggleButton() { | function initToggleButton() { | ||
console.log('初始化切换按钮'); | |||
var button = addToggleButton(); | |||
if (!button) { | |||
console.error('添加按钮失败'); | |||
return; | |||
} | |||
var isHOTA = getCookie('isHOTA') !== 'false'; // 修复:将字符串 'false' 转换为布尔值 | |||
function updateButtonText() { | function updateButtonText() { | ||
第54行: | 第81行: | ||
isHOTA = !isHOTA; | isHOTA = !isHOTA; | ||
toggleClasses(isHOTA); | toggleClasses(isHOTA); | ||
toggleTemplate(isHOTA); | |||
updateButtonText(); | updateButtonText(); | ||
setCookie('isHOTA', isHOTA, 30); | setCookie('isHOTA', isHOTA, 30); // 修复:将布尔值存储为字符串 'true' 或 'false' | ||
console.log('版本已切换,当前状态:', isHOTA ? 'HOTA' : 'SOD'); | |||
} | } | ||
button.addEventListener('click', (e) | button.addEventListener('click', function(e) { | ||
e.preventDefault(); | e.preventDefault(); | ||
toggleVersion(); | toggleVersion(); | ||
第65行: | 第94行: | ||
// 初始化 | // 初始化 | ||
toggleClasses(isHOTA); | toggleClasses(isHOTA); | ||
toggleTemplate(isHOTA); | |||
updateButtonText(); | updateButtonText(); | ||
console.log('切换按钮初始化完成'); | |||
} | |||
// 确保DOM完全加载后执行初始化 | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initToggleButton); | |||
} else { | |||
initToggleButton(); | |||
} | } | ||
// | // 添 加 一个全局函数用于手动触发 初始化 (以防其他方法失败) | ||
window.manualInitToggleButton = initToggleButton; |
2024年9月24日 (二) 08:46的最新版本
// 添加新按钮 function addToggleButton() { var navbarNav = document.querySelector('ul.nav.navbar-nav'); if (!navbarNav) { console.error('未找到 ul.nav.navbar-nav 元素'); return null; } var newButton = document.createElement('li'); newButton.className = 'dropdown nav-item'; newButton.innerHTML = '<a class="nav-link" role="button" title="切换版本" href="#" id="toggleButton">' + '<span class="fa fa-exchange"></span>' + '<span class="hide-title">切换版本</span>' + '</a>'; navbarNav.appendChild(newButton); console.log('新按钮已添加到导航栏'); return document.getElementById('toggleButton'); } // 切换显示/隐藏类 function toggleClasses(showHOTA) { var hotaElements = document.querySelectorAll('.onlyhota'); var sodElements = document.querySelectorAll('.onlysod'); for (var i = 0; i < hotaElements.length; i++) { hotaElements[i].style.display = showHOTA ? '' : 'none'; } for (var j = 0; j < sodElements.length; j++) { sodElements[j].style.display = showHOTA ? 'none' : ''; } } // 切换显示/隐藏类 function toggleTemplate(showHOTA) { // 获取 #mw-customcollapsible-hota 下的 .mw-collapsible-content 元素 var hotaElements = document.querySelectorAll('#mw-customcollapsible-hota .mw-collapsible-content'); // 获取 #mw-customcollapsible-sod 下的 .mw-collapsible-content 元素 var sodElements = document.querySelectorAll('#mw-customcollapsible-sod .mw-collapsible-content'); // 切换 HOTA 模板内容的显示/隐藏 for (var i = 0; i < hotaElements.length; i++) { hotaElements[i].style.display = showHOTA ? '' : 'none'; } // 切换 SOD 模板内容的显示/隐藏 for (var j = 0; j < sodElements.length; j++) { sodElements[j].style.display = showHOTA ? 'none' : ''; } } // 设置Cookie function setCookie(name, value, days) { var expires = new Date(Date.now() + days * 864e5).toUTCString(); document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/'; } // 获取Cookie function getCookie(name) { return document.cookie.split('; ').reduce(function(r, v) { var parts = v.split('='); return parts[0] === name ? decodeURIComponent(parts[1]) : r; }, ''); } // 主函数 function initToggleButton() { console.log('初始化切换按钮'); var button = addToggleButton(); if (!button) { console.error('添加按钮失败'); return; } var isHOTA = getCookie('isHOTA') !== 'false'; // 修复:将字符串 'false' 转换为布尔值 function updateButtonText() { button.querySelector('.hide-title').textContent = isHOTA ? '切换至死亡阴影' : '切换至深渊号角'; } function toggleVersion() { isHOTA = !isHOTA; toggleClasses(isHOTA); toggleTemplate(isHOTA); updateButtonText(); setCookie('isHOTA', isHOTA, 30); // 修复:将布尔值存储为字符串 'true' 或 'false' console.log('版本已切换,当前状态:', isHOTA ? 'HOTA' : 'SOD'); } button.addEventListener('click', function(e) { e.preventDefault(); toggleVersion(); }); // 初始化 toggleClasses(isHOTA); toggleTemplate(isHOTA); updateButtonText(); console.log('切换按钮初始化完成'); } // 确保DOM完全加载后执行初始化 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initToggleButton); } else { initToggleButton(); } // 添加一个全局函数用于手动触发初始化(以防其他方法失败) window.manualInitToggleButton = initToggleButton;