如何在网页与控制台获取PHP动态内容？及Quiz取值异常求助

嘿，这个坑我之前踩过！你遇到的问题本质是jQuery选择器没有精准定位到当前显示的题目元素，导致每次都取到了页面中第一个匹配到的表单值（也就是第一题的）。下面给你拆解原因和解决方案：

常见原因分析 #

1. 重复的元素选择器：如果每道题的选项都用了相同的ID/name，直接用全局选择器（比如$('input[name="answer"]')）只会返回页面中第一个匹配的元素，这就是为什么永远拿到第一题的值。
2. 未限定选择范围：切换题目时只是隐藏/显示元素，但取值时没有限定在当前显示的题目容器内，导致全局查找。

具体解决方案 #

第一步：优化HTML结构（配合PHP生成） #

确保每个题目都有独立的容器，并且通过类名和自定义属性标记：

<!-- PHP循环生成题目示例 -->
<?php for($i=1; $i<=10; $i++){ ?>
  <div class="quiz-item <?php echo $i==1 ? 'active' : ''; ?>" data-quiz-id="<?php echo $i; ?>" style="<?php echo $i!=1 ? 'display:none;' : ''; ?>">
    <div class="row1">题目<?php echo $i; ?>的行1内容</div>
    <div class="row2">题目<?php echo $i; ?>的行2内容</div>
    <div class="question">
      <p><?php echo $questionContent[$i]; ?></p>
      <input type="radio" name="answer_<?php echo $i; ?>" value="1">选项1<br>
      <input type="radio" name="answer_<?php echo $i; ?>" value="2">选项2<br>
    </div>
  </div>
<?php } ?>
<button id="next">下一题</button>

这里做了两个关键优化：

• 给每个题目容器加quiz-item类，当前显示的题目加active类
• 用data-quiz-id标记题目编号，同时给每个题目的选项name加上编号（避免提交时冲突，也方便前端定位）

第二步：修改jQuery逻辑，精准取值 #

更新你的点击事件代码，确保每次取值都限定在当前活跃的题目容器内：

$(document).ready(function(){
  var quizCount = 1;
  const totalQuizzes = 10;

  $("#next").click(function(){
    // 1. 获取当前活跃题目的选中值
    const currentSelectedVal = $('.quiz-item.active input[type="radio"]:checked').val();
    console.log(`第${quizCount}题的选中值：${currentSelectedVal}`);

    // 2. 切换到下一题
    if(quizCount < totalQuizzes){
      // 隐藏当前题目，移除active类
      $('.quiz-item.active').removeClass('active').hide();
      quizCount++;
      // 显示下一题，添加active类
      $(`.quiz-item[data-quiz-id="${quizCount}"]`).addClass('active').show();
    } else {
      // 处理最后一题的提交逻辑
      alert('所有题目已完成！可以提交结果了');
    }
  });
});

关键注意点 #

• 永远不要在页面中使用重复的ID！如果之前给选项加了相同的ID，一定要改掉，换成类名或者带编号的name。
• 取值时必须通过.quiz-item.active限定范围，确保只在当前显示的题目里查找元素。
• 切换题目时，一定要正确更新active类的归属，这是精准定位的核心。

内容的提问来源于stack exchange，提问作者Piotr Mirosz