如何实现不刷新网页仅刷新测验（Quiz）功能？

嘿，我懂你的困扰——你现在点击按钮用window.location.reload()会直接刷新整个网页，但你其实只想重置测验部分对吧？这个问题很常见，因为window.location.reload()本来就是用来刷新整个页面的，咱们换个思路就行！

核心思路：抽离测验初始化逻辑，局部重置 #

你需要把初始化测验的代码单独做成一个可重复调用的函数，这样点击按钮时，只需要重新执行这个函数来重置测验状态，而不是刷新整个页面。举个具体的例子：

// 第一步：把测验的初始化/重置逻辑抽成独立函数
function resetQuiz() {
  // 这里放你测验的重置逻辑，比如：
  // 1. 清除用户的答题选择
  $(".quiz-option").prop("checked", false);
  // 2. 隐藏之前的结果提示
  $(".quiz-result").hide();
  // 3. 重置分数或答题进度
  $("#score").text("0");
  // 4. 如果是动态加载题目，重新加载初始题目
  loadInitialQuestions();
  // 其他你需要重置的内容...
}

// 第二步：页面加载时初始化测验
$(function() {
  // 首次加载初始化测验
  resetQuiz();

  // 点击按钮时调用重置函数，而非刷新页面
  $("#myButton").click(function() {
    resetQuiz();
  });
});

额外提示 #

如果你的测验是基于某个第三方插件（比如专门的Quiz插件）开发的，记得去查一下插件的官方文档，通常这类插件都会提供内置的重置/刷新方法，直接调用即可，不用自己写全部重置逻辑。

总之，避免用window.location.reload()做局部内容的刷新，这种方式不仅体验差，还会丢失页面上的其他状态（比如用户可能在页面其他部分填的内容），局部重置才是更优的方案~

内容的提问来源于stack exchange，提问作者Yassine Atlagh