如何在单击另一个元素时关闭一个元素

Question

我希望每个元素在使用纯 javascript 单击“x”图标时关闭。 我实际上是 javascript 新手，所以我正在尝试一些东西。 以下是我的代码以及我能够做的事情。

我希望每个元素在单击“x”图标时关闭。

 var closeBtnTask = document.querySelectorAll(".times"); for (var i = 0; i < closeBtnTask.length; i++) { closeBtnTask[i].addEventListener("click", function() { var panel = document.querySelectorAll(".taskpanel"); for (var x = 0; x < taskpanel.length; x++) { Things[x].style.display = "none"; } }); }

 .task-box { float: left; width: 100%; } .task-wrapper { width: 400px; background: #f5f5f5; } ul.mytask { padding: 0px; margin: 0px; padding-left: 5px; } ul.mytask li { list-style: none; line-height: 34px; border-bottom: 1px solid #ddd; } .mytask span { float: right; padding-right: 10px; cursor: pointer; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="task-box"> <div class="task-wrapper"> <ul class="mytask"> <li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li> </ul> </div> </div>

Answer 1

你的代码有点错误，我在这里修复了https://jsfiddle.net/L81t9ym6/

var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
  closeBtnTask[i].addEventListener("click", function() {
    var panel = document.querySelectorAll(".taskpanel");
    for (var x = 0; x < panel.length; x++) {
      panel[x].style.display = "none";
    }
  });
}

注意：当您单击任何 x 时，这将关闭每个元素，而不仅仅是单击发生的元素。

编辑

这是关闭您单击的面板的代码

var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
  closeBtnTask[i].addEventListener("click", function(ev) {
    var tp = ev.target.closest('.taskpanel');
    tp.style.display = "none";
  });
}

我不知道 javascript 现在有一个原生的.closest方法，这很有用！ https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 2

你也可以用普通的 JS 委托

 document.querySelector(".mytask").addEventListener("click",function(e) { let tgt = e.target; if (tgt.matches(".fa-close")) tgt.closest("li").style.display="none"; })

 .task-box { float: left; width: 100%; } .task-wrapper { width: 400px; background: #f5f5f5; } ul.mytask { padding: 0px; margin: 0px; padding-left: 5px; } ul.mytask li { list-style: none; line-height: 34px; border-bottom: 1px solid #ddd; } .mytask span { float: right; padding-right: 10px; cursor: pointer; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="task-box"> <div class="task-wrapper"> <ul class="mytask"> <li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li> <li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li> </ul> </div> </div>

Answer 3

在这里使用这个 Javascript 工作演示https://jsfiddle.net/Lg7bjr3k/

$('.times').click(function(){
$(this).parent().parent().hide();
})