jQuery点击事件中通过匹配父容器ID为对应按钮添加类的问题

错误原因 #

• ID选择器缺少前缀：你获取到的target是纯ID字符串（例如btn-1），直接传入$()会被识别为标签选择器，需要在前面拼接#才是正确的ID选择器写法。
• 父容器类名拼写不匹配：HTML中父容器的类为btn-container，示例代码中写的是.button-container，如果控制台可以正常输出ID，大概率是写示例时的手误，实际业务中需保证类名一致。

修正后的代码 #

$("button").click(function (e) {
  e.preventDefault();
  // 用closest匹配最近的父容器，比parents更准确
  var targetId = $(e.target).closest(".btn-container").attr("id");
  // 拼接#构造ID选择器
  $("#" + targetId).find(".btn").addClass("active");
});

优化方案（可选） #

如果不需要单独复用ID值，可以直接操作获取到的父容器元素，省去二次查询的开销，代码更简洁：

$("button").click(function (e) {
  e.preventDefault();
  const $parent = $(e.target).closest(".btn-container");
  $parent.find(".btn").addClass("active");
});

内容的提问来源于stack exchange，提问作者Cosimo wiSe