构建动态网站：实现图片描述切换与主题切换功能

<div class="god-card">
    <img src="path/to/image_of_god.png" alt="Egyptian God Name">
    <p class="description hidden">
        这是关于这位埃及神的详细描述，例如其职责、神话故事等。
    </p>
    <button class="toggle-description-btn">显示/隐藏描述</button>
</div>

<!-- 可以为多个神祇复制此结构 -->
<div class="god-card">
    <img src="path/to/another_image.png" alt="Another God Name">
    <p class="description hidden">
        这是另一位神的描述内容。
    </p>
    <button class="toggle-description-btn">显示/隐藏描述</button>
</div>

.hidden {
    display: none; /* 隐藏元素 */
}

/* 可以添加一些基本样式美化卡片 */
.god-card {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px;
    text-align: center;
    max-width: 300px;
    display: inline-block; /* 使卡片并排显示 */
    vertical-align: top;
}

.god-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.god-card button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.god-card button:hover {
    background-color: #0056b3;
}

document.addEventListener('DOMContentLoaded', () => {
    // 获取所有带有 'toggle-description-btn' 类的按钮
    const toggleButtons = document.querySelectorAll('.toggle-description-btn');

    toggleButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 获取当前按钮的父元素 (即 .god-card)
            const parentCard = button.closest('.god-card');
            // 在父元素中查找带有 'description' 类的段落
            const description = parentCard.querySelector('.description');

            // 切换 'hidden' 类，从而切换描述的显示/隐藏
            if (description) {
                description.classList.toggle('hidden');
            }
        });
    });
});

<button id="theme-toggle-btn">切换主题</button>

/* 默认主题 (浅色主题) */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

/* 深色主题 */
body.dark-theme {
    background-color: #222;
    color: #eee;
}

/* 可以为深色主题调整其他元素样式 */
body.dark-theme .god-card {
    background-color: #333;
    border-color: #555;
    color: #eee;
}

body.dark-theme .god-card button {
    background-color: #0056b3;
}

body.dark-theme .god-card button:hover {
    background-color: #003d7a;
}

document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle-btn');
    const body = document.body;

    // 尝试从 localStorage 加载用户上次选择的主题
    const savedTheme = localStorage.getItem('websiteTheme');
    if (savedTheme) {
        body.classList.add(savedTheme);
    } else {
        // 如果没有保存的主题，默认使用浅色主题 (或你想要的任何主题)
        body.classList.add('light-theme'); // 明确设置一个默认主题
    }

    if (themeToggleButton) {
        themeToggleButton.addEventListener('click', () => {
            if (body.classList.contains('dark-theme')) {
                body.classList.remove('dark-theme');
                body.classList.add('light-theme');
                localStorage.setItem('websiteTheme', 'light-theme');
            } else {
                body.classList.remove('light-theme'); // 移除旧主题类
                body.classList.add('dark-theme');
                localStorage.setItem('websiteTheme', 'dark-theme');
            }
        });
    }
});