点击<td>或其内部<div>时如何通过AJAX实现标志位切换功能？

故障原因排查&优化方案 #

1. 基础依赖问题排查 #

• 确认页面已正确引入jQuery库：你的代码使用了$.ajax和$选择器，未引入jQuery时相关逻辑会直接报错。打开浏览器控制台（F12）如果出现$ is not defined报错，在script标签前补充jQuery引入代码即可。
• 确认请求路径正确：打开F12网络面板，点击目标div后查看对应请求是否返回404，如果路径错误修改为正确的绝对/相对路径即可。

2. 修复重复ID核心问题 #

HTML规范要求id属性全局唯一，表格为多行结构时，如果每一行货币列的div都使用id="currency"，jQuery选择器只会匹配到页面中第一个id为currency的元素，点击其他行永远只会修改第一行内容。
优化方案改用class属性绑定事件，同时通过事件对象获取当前点击的元素：

优化后PHP输出代码

echo '<td><div class="currency">'. $currency . '</div></td>';

优化后JS代码（取消内联onclick，改用事件委托绑定，动态加载的表格行也可生效）

<script>
// 等待DOM加载完成后绑定事件
$(function() {
  // 事件委托绑定到document，无需担心表格动态更新的问题
  $(document).on('click', '.currency', function() {
    // 保存当前点击的元素对象，避免AJAX回调中this指向变化
    const $current = $(this);
    $.ajax({
      url: "assets/scripts/php/currency.php",
      success: function(data){
        // 仅修改当前点击的div内容
        $current.html(data);
      },
      error: function() {
        console.log('请求失败，请检查路径或后端接口');
      }
    });
  });
});
</script>

3. 其他补充排查点 #

• 直接在浏览器访问currency.php接口路径，确认返回内容符合预期，无PHP报错输出。
• 如果需要传递当前行的标识给后端（比如切换对应账单的货币单位），可以在div上添加自定义data-*属性，示例：<div class="currency" data-bill-id="'.$bill_id.'">，JS中通过$current.data('bill-id')获取参数后，通过AJAX的data参数传给后端即可。

内容的提问来源于stack exchange，提问作者7segment