使用jQuery开发校园测验布局时，div无法隐藏该如何解决？

Hey Kamila，刚接触编程遇到这类小问题太正常啦，咱们一步步来排查和解决：

先排查最容易踩的几个坑 #

1. 确认jQuery是否正确引入 #

如果你的页面里没加载jQuery库，$("#one").hide()肯定不会生效。你需要在<head>标签里或者</body>闭合标签前，加上jQuery的引入代码：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

要是用本地文件的话，得确保路径写对，比如src="js/jquery.min.js"，别让浏览器找不到文件。

2. 检查元素ID是否准确 #

• 确认第一题的容器元素ID确实是one，有没有拼写错误？比如把小写的one写成了One，或者多打了一个字母？
• 页面里不能有重复的ID！每个元素的ID必须唯一，不然jQuery只会找到第一个匹配的元素，逻辑直接乱掉。

3. 确保代码在DOM加载完成后执行 #

如果你的JS代码写在<head>里，此时页面元素还没加载完，jQuery根本找不到#one这个元素，自然没法隐藏。你得把代码放在$(document).ready()里，保证DOM就绪后再执行：

$(document).ready(function() {
  // 给按钮绑定点击事件
  $(".next-btn").click(function() {
    $("#one").hide();
    // 别忘了加上显示第二题的代码，比如$("#two").show();
  });
});

更灵活的通用解决方案（推荐） #

要是以后要加更多题目，硬编码ID（#one、#two）会特别麻烦。可以给所有问题容器加统一的类，比如question，用逻辑自动切换显示/隐藏：

<!-- 问题容器示例 -->
<div class="question active" id="one">第一题内容...</div>
<div class="question" id="two" style="display:none;">第二题内容...</div>

<button class="next-btn">Next Question</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  $(".next-btn").click(function() {
    // 找到当前显示的问题，隐藏它
    const currentQuestion = $(".question.active");
    currentQuestion.hide().removeClass("active");
    
    // 找到下一个问题，显示它
    const nextQuestion = currentQuestion.next(".question");
    if (nextQuestion.length) {
      nextQuestion.show().addClass("active");
    }
  });
});
</script>

这种方法不用每次改ID，新增题目只要加个class="question"的容器就行，省心多了。

最后再检查一步 #

打开浏览器的开发者工具（按F12），切换到Console标签，看看有没有报错信息：

• 如果显示$ is not defined，那就是jQuery没加载好；
• 如果显示cannot read property 'hide' of undefined，那就是找不到#one元素。

试试看上面的方法，应该能解决你的问题～

内容的提问来源于stack exchange，提问作者Kamila Jarek