49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
// 频道标签过滤
|
||
document.querySelectorAll('.channel-tag').forEach(tag => {
|
||
tag.addEventListener('click', () => {
|
||
const channel = tag.dataset.channel;
|
||
document.querySelectorAll('.announcement').forEach(ann => {
|
||
ann.style.display = channel === 'all' || ann.dataset.channel === channel ? 'block' : 'none';
|
||
});
|
||
});
|
||
});
|
||
|
||
// 置顶悬浮动画
|
||
document.querySelectorAll('.pin-icon').forEach(pin => {
|
||
pin.addEventListener('click', () => {
|
||
const announcement = pin.closest('.announcement');
|
||
announcement.classList.toggle('pinned');
|
||
});
|
||
});
|
||
|
||
// ✨ 动态数据加载（M24 核心！）
|
||
fetch('data.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const announcements = document.querySelector('.announcements-container');
|
||
announcements.innerHTML = '';
|
||
|
||
data.forEach(item => {
|
||
const announcement = document.createElement('div');
|
||
announcement.className = nnouncement ;
|
||
announcement.dataset.channel = item.channel;
|
||
announcement.innerHTML =
|
||
<div class="announcement-content">
|
||
<h3></h3>
|
||
<p></p>
|
||
</div>
|
||
<i class="pin-icon"></i>
|
||
;
|
||
announcements.appendChild(announcement);
|
||
});
|
||
|
||
// 重新绑定事件
|
||
document.querySelectorAll('.pin-icon').forEach(pin => {
|
||
pin.addEventListener('click', () => {
|
||
const announcement = pin.closest('.announcement');
|
||
announcement.classList.toggle('pinned');
|
||
pin.textContent = announcement.classList.contains('pinned') ? '⭐' : '✨';
|
||
});
|
||
});
|
||
});
|