如何在没有jQuery的情况下隐藏最接近元素的元素？

Question

我有一个函数可以在单击此图标时更改图标的src属性。 我还希望它隐藏类fave_icon中最接近的图标。我尝试了以下但它没有工作：

function trash(event, trashcan){
    event.stopPropagation();
    if (trashcan.getAttribute('src') == "Iconos/tacho.png")
    {
        trashcan.src = "Iconos/warning.png"; //this works ok
        var heart = trashcan.closest(".fave_icon");
        heart.style.visibility = "hidden"            
    }
}

基本上我想隐藏与fave_icon类最近的元素到trashcan。

在HTML上我有好几次：

<button class="accordion">
  <div>
    <img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon">
  </div>
  <div>
    <img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon">
  </div>
</button>

Answer 1

如果fave_icon是一个类，那么你必须在类名作为选择器的一部分之前放置点（.）。

更改var heart = trashcan.closest("fave_icon");

要

var heart = trashcan.closest(".fave_icon");

根据您提供的代码和HTML，您可以执行以下操作：

＆＃13;

＆＃13;

function trash(event, trashcan){
 event.stopPropagation();
 if (trashcan.getAttribute('src') == "Iconos/tacho.png"){
    trashcan.src = "Iconos/warning.png"; //this works ok
    var heart = trashcan.closest('button').querySelector('.fave_icon');
    heart.style.visibility = "hidden";
  }
}

＆＃13;

<button class="accordion">
  <div>
    <img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon">
  </div>
  <div>
    <img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon">
  </div>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从垃圾桶图标中，您向上移动到div的一个级别，选择previousElementSibling以获取心脏的div，然后在一个级别上移动到心脏图像本身。

由于该元素已包含在事件目标中，因此您无需传递this。或者，更好的是，如果您首先选择垃圾图像，则可以完全避免this并使用显式变量名称，这些名称更易于理解和调试。

但是内联事件处理程序在HTML标记中基本上是eval - 它们是不好的做法，导致代码很差，难以管理的代码。请认真考虑使用JavaScript附加您的活动，例如：https://developer.mozilla.org/en/DOM/element.addEventListener

另一个问题是button s不应该有结束标记。请改用容器元素，例如div。

所以，尝试这样的事情：

document.querySelectorAll('img[src="Iconos/tacho.png"]').forEach(img => {
  img.onclick = () => {
    const heartImg = img.parentElement.previousElementSibling.children[0];
    heartImg.style.visibility = 'hidden';
  };
});
  

<div class="accordion">
  <div>
    <img src="Iconos/heart.png" alt="Fave" class="fave_icon">
  </div>
  <div>
    <img src="Iconos/tacho.png" alt="Delete" class="delete_icon">
  </div>
</div>

Answer 3

如果两个项目相邻，您可以为点击的元素添加一个类，并使用一般兄弟组合器。

＆＃13;

＆＃13;

document.getElementById("hide")
  .addEventListener("click", (event) => {
    event.target.classList.add('active');
  }, false);

＆＃13;

#hide.active~.element {
  visibility: hidden;
}

#hide {
  cursor: pointer;
}

.accordion {
  padding: 15px;
  background: lightgrey;
  border-bottom: 1px solid grey;
}

.accordion div {
  color: black;
  margin-right: 20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/icono/1.3.0/icono.min.css" rel="stylesheet" />

<div class="accordion">
  <div class="icono-trash" id="hide"></div>
  <div class="element icono-heart"></div>
</div>

＆＃13;

＆＃13;

＆＃13;