如何在jQuery的showTicket函数中获取PHP循环传入的ID并传递给.load

这问题很常见，咱们分两种方式来实现，一种是直接修改你现有代码的快速方案，另一种是更优雅的前端实践方案：

方案一：直接修改现有代码（快速适配） #

1. 给showTicket函数添加参数接收ID #

首先，你当前的jQuery函数没有定义参数来接收PHP传递的ID，所以先修改函数，让它能拿到这个值：

function showTicket(ticketId) {
  // 把ID拼接到load的URL里
  $(".open").load(`ticket.php?id=${ticketId}`);
  $('.open').animate({height: "toggle", opacity: "toggle"}, "slow");
}

这里用了ES6的模板字符串（反引号`）来拼接URL，比加号拼接更清晰，当然用"ticket.php?id=" + ticketId也完全没问题。

2. 优化PHP里的参数传递（避免语法问题） #

为了防止ID是字符串或者包含特殊字符时出现JS语法错误，建议把传递的ID用引号包裹起来，修改你的PHP循环代码：

while($row = $result->fetch_assoc()){
  echo '<li class="li"><a href="#?id=' . $row['id'] . '" onClick="showTicket(\'' . $row['id'] . '\')">' . $row['rubrik'] . '</a></li>';
}

这里用转义的单引号\'把ID包裹，确保传递给JS的是一个合法的字符串参数。

方案二：Unobtrusive JavaScript（推荐的优雅写法） #

把JS事件和HTML结构分离是更专业的前端实践，维护起来更方便，也避免内联事件的潜在问题：

1. 修改PHP代码，用data属性存储ID #

给你的链接标签添加一个自定义的data-ticket-id属性来存ID，同时加一个类名方便jQuery绑定事件：

while($row = $result->fetch_assoc()){
  echo '<li class="li"><a href="#?id=' . $row['id'] . '" class="ticket-link" data-ticket-id="' . $row['id'] . '">' . $row['rubrik'] . '</a></li>';
}

2. 用jQuery绑定点击事件并获取ID #

然后在JS文件里（或者script标签中）绑定事件，从data属性里读取ID：

// 用事件委托绑定，确保动态生成的元素也能触发事件
$(document).on('click', '.ticket-link', function(e) {
  e.preventDefault(); // 阻止链接默认的跳转行为
  // 从data属性获取ID
  const ticketId = $(this).data('ticket-id');
  // 加载对应ID的ticket内容
  $(".open").load(`ticket.php?id=${ticketId}`);
  $('.open').animate({height: "toggle", opacity: "toggle"}, "slow");
});

这种写法的好处是，即使后续动态新增ticket链接，事件也能正常触发，而且JS逻辑和HTML结构完全分离，代码更整洁。

内容的提问来源于stack exchange，提问作者Alexander Jonsson