如何使用jQuery的closest()方法设置就近input[type=hidden]隐藏域的值

你的代码存在三个核心错误导致隐藏域赋值不生效：

• 全局选择器匹配错误：$("input[type='hidden']")会选中页面所有隐藏域，而非当前点击的toggle图片对应的同层级隐藏域
• DOM查找方法使用错误：closest()是向上查找元素祖先节点的方法，不能用来查找同层级元素，你需要用siblings()匹配同层级的隐藏域
• 条件分支逻辑错误：两个独立if语句会导致修改src后，第二个if判断也被触发，相当于切换到on之后立刻又切回off，需要改用else if做分支隔离

$(document).on('click', 'img.toggle', function() {
  const $this = $(this);
  // 这里用includes判断避免浏览器自动补全src为绝对路径导致匹配失败
  const currentSrc = $this.attr("src");
  const $targetHidden = $this.siblings("input[type='hidden']");
  
  if (currentSrc.includes("off.png")) {
    $this.attr("src", "on.png");
    $targetHidden.val("on");
  } else if (currentSrc.includes("on.png")) {
    $this.attr("src", "off.png");
    $targetHidden.val("off");
  }

  console.log($targetHidden.val());
});

原有HTML代码无需修改即可正常运行，点击toggle图片后对应同层级隐藏域会同步赋值为on/off。

内容的提问来源于stack exchange，提问作者Sylwester Marć