本文详解因 html id 重复导致 jquery 仅获取首个候选人数据的问题，提供基于 class 的批量选择、并行 ajax 请求及动态结果渲染的完整解决方案。
在使用 jquery + ajax 动态加载多个候选人得票数时，一个常见却极易被忽视的错误是：在 php 循环中为多个元素重复使用相同的 id=”contestname” 和 id=”precount”。html 规范要求 id 属性必须全局唯一，而 jQuery 的 $(‘#contestname’) 仅匹配第一个匹配元素——这正是你只看到第一位候选人姓名和票数、其余完全不显示的根本原因。
✅ 正确做法：改用 class + 批量处理
首先，在 index.php 中将 id 替换为语义化 class，确保每个候选人区块结构一致：
Presidential Result
? javaScript 改写：批量采集 + 并行请求
在 Query.js 中，不再依赖单一 ID，而是通过 class 获取所有候选人姓名，并为每位候选人发起独立 Ajax 请求（或一次性请求后服务端返回数组）：
方案一：客户端并行请求（推荐用于逻辑简单、数据量小场景）
function view_pres_count() { // 提取所有候选人姓名（去空格、去重可选） const names = $('.contestname').map(function() { return $(this).text().trim(); }).get(); // 为每位候选人发起独立请求 names.forEach((name, index) => { $.ajax({ url: 'prescount.php', method: 'POST', data: { present: name }, dataType: 'json', // 自动解析 json，无需 $.parseJSON success: function(data) { // 安全写入对应位置的 precount 元素 $('.precount').eq(index).html(data.html || '0'); }, error: function() { $('.precount').eq(index).html('—'); } }); }); }方案二：服务端聚合返回（更高效，推荐用于生产环境）
修改 prescount.php，接收空参数或统一标识，查询全部总统候选人票数并返回 JSON 数组：
// prescount.php require_once 'db.php'; // 确保数据库连接可用 $sql = "SELECT c.fullname, COALESCE(SUM(v.vote), 0) as total FROM contestants c LEFT JOIN votes v ON c.id = v.contestant_id AND v.post = 'president' WHERE c.post = 'president' GROUP BY c.id, c.fullname ORDER BY c.id"; $result = mysqli_query($conn, $sql); $data = []; while ($row = mysqli_fetch_assoc($result)) { $data[] = ['name' => $row['fullname'], 'html' => (int)$row['total']]; } echo json_encode($data);前端 JS 调整为单次请求 + 遍历赋值：
function view_pres_count() { $.ajax({ url: 'prescount.php', method: 'POST', dataType: 'json', success: function(data) { // 确保 data 是数组且长度匹配 if (Array.isArray(data) && data.length > 0) { $('.precount').each(function(i) { const vote = data[i] ? data[i].html : 0; $(this).html(vote); }); } }, error: function() { $('.precount').html('Error'); } }); }⚠️ 关键注意事项
- ❌ 禁止在循环中重复使用相同 id；✅ 始终用 class 表达“一类元素”。
- ✅ 使用 .eq(index) 或 $(‘.selector’)[i] 精准定位 dom 节点，避免污染。
- ✅ 设置 dataType: ‘json‘ 让 jQuery 自动解析，比手动 $.parseJSON() 更安全。
- ✅ 后端返回前务必校验数据完整性（如 COALESCE 处理 NULL 投票数），前端做好兜底（如 data[i]?.html || ‘0’）。
- ✅ 首次加载建议在 DOM Ready 后自动调用 view_pres_count()，例如：
$(document).ready(function() { view_pres_count(); });
通过以上重构，你将获得可扩展、健壮且符合 Web 标准的多候选人实时票数展示系统——不仅解决当前问题，也为后续增加副总统、部长等职位结果打下坚实基础。