如何在jQuery .on绑定的点击事件中传入变量（如按钮ID）

没问题，这有几种简洁且符合最佳实践的方法来实现你想要的效果，我一步步给你说明：

方法1：使用HTML5 data-* 属性（推荐） #

这是最标准、最易维护的方式，利用HTML5的自定义数据属性存储ID，再在jQuery事件处理函数中读取它。

第一步：修改PHP输出按钮的代码 #

给按钮添加data-id属性，把需要传递的ID值注入进去：

<?php
// 假设你的ID变量是 $target_id
$target_id = 456; // 替换成你的实际ID值
echo "<button class='upvote' data-id='{$target_id}'><img style='height: 100%; width: 100%; object-fit: contain;' src='../images/caret-arrow-up_318-42194.jpg'></button><br>";
?>

注意：我把原来的id='upvote'改成了class='upvote'——如果页面上有多个投票按钮，重复ID是不符合HTML规范的，绑定class更适合批量元素的事件委托。

第二步：在jQuery事件处理中获取ID #

通过$(this).data('id')就能轻松拿到存储的ID值：

$(".Reviews").on("click", ".upvote", function(){
    // 获取传递的ID
    const targetId = $(this).data('id');
    // 接下来就可以用这个ID做业务操作了，比如发起AJAX请求
    console.log("触发投票，目标ID：" + targetId);
});

方法2：直接嵌入参数到事件调用（兼容旧场景，不推荐） #

如果你更习惯原生onclick的传参形式，也可以在PHP输出时直接把ID作为参数传入，但这种方式会混合HTML与JS逻辑，维护性稍差：

修改PHP代码： #

<?php
$target_id = 456;
echo "<button class='upvote' onclick='handleUpvote({$target_id})'><img style='height: 100%; width: 100%; object-fit: contain;' src='../images/caret-arrow-up_318-42194.jpg'></button><br>";
?>

定义对应的JS函数： #

function handleUpvote(targetId) {
    console.log("触发投票，目标ID：" + targetId);
    // 这里编写你的业务逻辑
}

小提示 #

• 记得把PHP中的图片路径反斜杠\改成正斜杠/，避免浏览器解析路径出错。
• 事件委托绑定到.Reviews父元素是非常好的做法，能自动处理动态生成的按钮，无需重复绑定事件。

内容的提问来源于stack exchange，提问作者Martin Olesen