如何将点击按钮弹出的解释文本直接嵌入页面对应题目下方

实现步骤 #

1. 批量获取所有题目对应的解释内容
   解释内容存储在原网站的接口中，请求路径为/get_explain/[按钮get_id属性值]/，你需要先登录原网站获取所有解释：

• 题量少的情况下，直接逐个点击按钮复制弹窗里的解释内容，和按钮的get_id值一一对应保存即可。
• 题量多的话，在原网站页面按F12打开开发者控制台，运行以下脚本批量导出所有解释：

const explainMap = {};
document.querySelectorAll('.explain_btn').forEach(async btn => {
  const id = btn.getAttribute('get_id');
  const res = await fetch(`/get_explain/${id}/`);
  explainMap[id] = await res.text();
});
setTimeout(() => console.log(JSON.stringify(explainMap, null, 2)), 5000);

等待5秒后控制台会输出所有get_id和对应解释的映射关系，复制这段内容备用。

2. 修改本地HTM文件插入解释
   打开你保存的本地HTM文件，在文件末尾的</body>标签之前插入以下代码，将代码中的explainMap值替换为你上一步复制的映射内容：

<script>
// 替换为你自己导出的解释映射
const explainMap = {
  "1-1": "此处填对应id的解释内容",
  // 剩余id的解释依次补充
};

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.explain_btn').forEach(btn => {
    const qid = btn.getAttribute('get_id');
    // 生成解释文本容器
    const explainBox = document.createElement('div');
    explainBox.style.margin = '12px 0';
    explainBox.style.padding = '10px';
    explainBox.style.backgroundColor = '#f0f0f0';
    explainBox.textContent = explainMap[qid] || '未找到对应解释';
    // 将解释插入到按钮所在区域的下方
    btn.parentNode.after(explainBox);
    // 不需要原按钮可直接删除
    btn.remove();
  });
});
</script>

保存文件后重新打开，所有解释就会直接显示在对应题目的下方。

如果不需要默认显示解释，要点击按钮才展示，把上述脚本替换为以下内容即可：

<script>
const explainMap = {
  // 同上填入你的解释映射
};
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.explain_btn').forEach(btn => {
    btn.addEventListener('click', () => {
      // 已经插入过解释就不再重复插入
      if (btn.parentElement.nextElementSibling?.classList.contains('explain-box')) return;
      const qid = btn.getAttribute('get_id');
      const explainBox = document.createElement('div');
      explainBox.classList.add('explain-box');
      explainBox.style.margin = '12px 0';
      explainBox.style.padding = '10px';
      explainBox.style.backgroundColor = '#f0f0f0';
      explainBox.textContent = explainMap[qid] || '未找到对应解释';
      btn.parentNode.after(explainBox);
    });
  });
});
</script>

内容的提问来源于stack exchange，提问作者coding nub