不用jQuery实现点击元素后隐藏最近.fave_icon元素的问题

看起来你的图标切换逻辑完全没问题，但隐藏.fave_icon的部分失效，大概率是closest()方法的使用场景不对——这个方法只会查找当前元素的祖先节点（从自身开始往上遍历DOM树）。如果你的.fave_icon并不是目标图标的祖先元素（比如是兄弟元素、子元素），那自然找不到对应的DOM节点。

常见场景的修复方案 #

1. 如果.fave_icon是目标图标的兄弟元素 #

比如DOM结构是这样的：

<div class="item">
  <img src="Iconos/tacho.png" onclick="trash(event, this)">
  <img class="fave_icon" src="Iconos/heart.png">
</div>

这种情况下，你需要先找到父元素，再通过父元素查询.fave_icon：

function trash(event, trashcan){
  event.stopPropagation();
  if (trashcan.getAttribute('src') === "Iconos/tacho.png") {
    trashcan.src = "Iconos/warning.png"; 
    // 先获取父元素，再查找内部的.fave_icon
    const heart = trashcan.parentElement.querySelector(".fave_icon");
    // 先判断元素是否存在，避免控制台报错
    if (heart) {
      heart.style.visibility = "hidden";
    } else {
      console.log("未找到.fave_icon元素，请检查DOM结构");
    }
  }
}

2. 如果.fave_icon是目标图标的后代元素 #

如果.fave_icon在trashcan内部，直接用querySelector查找后代即可：

const heart = trashcan.querySelector(".fave_icon");

3. 如果.fave_icon确实是目标图标的祖先元素 #

那可能是选择器拼写错误，或者元素还没加载完成。建议先加调试语句确认：

console.log(trashcan.closest(".fave_icon")); // 如果输出null，说明找不到元素

检查.fave_icon的类名是否正确，或者确保函数执行时DOM已经渲染完成。

额外提示 #

• 尽量用===代替==做严格相等判断，避免类型转换带来的意外问题。
• 操作DOM前先判断元素是否存在，能避免不必要的控制台报错。

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