如何仅展示当前选中行程对应的相同class的购买按钮td元素

你的原有代码$("input").click(function() { $("tr").first(".purchase-button").fadeIn(800); });存在两处明显错误：

1. $("tr")会选中页面中所有行程行，没有和当前触发事件的复选框做绑定，导致所有行的按钮都会被操作
2. jQuery的first()方法不接收筛选参数，只会返回匹配集合的第一个元素，筛选逻辑完全不生效

• $(this).find(".className").show()：find()用于查找当前元素的后代元素，购买按钮是复选框所属tr的后代，不是复选框本身的后代，所以无法匹配到元素
• $("tr").find(".className").show()：选中页面所有tr元素，自然会显示所有行的购买按钮
• $("this").closest(".classname").show()：this被加了引号变成字符串选择器，jQuery会查找页面中不存在的<this>标签，完全不指向当前触发事件的复选框；如果closest参数填的是按钮类名，按钮是tr的后代元素，祖先链里不可能有对应类名的元素，自然匹配失败

首先给行程行内的成人票复选框新增专属类名adult-ticket-checkbox，避免误命中页面其他input元素，同时给.purchase-button设置初始CSS隐藏：

.purchase-button {
  display: none;
}

然后替换原有事件绑定代码为：

// 仅绑定行程行内的成人票复选框
$("tr .adult-ticket-checkbox").change(function() {
  // 查找当前复选框所属的行程行
  const $currentRow = $(this).closest("tr");
  // 查找当前行内的购买按钮
  const $targetBtn = $currentRow.find(".purchase-button");
  // 根据勾选状态控制显隐，兼容取消勾选隐藏按钮的交互逻辑
  $(this).is(":checked") ? $targetBtn.fadeIn(800) : $targetBtn.fadeOut(800);
});

适配说明 #

• 如果你的复选框嵌套在多层td、div容器内，closest("tr")依然可以正常向上查找到最近的祖先tr元素，不需要调整层级匹配逻辑
• 用change事件代替click事件更符合表单控件交互规范，适配键盘操作选中复选框的场景

内容的提问来源于stack exchange，提问作者Wiaan.Duvenhage