我有四个具有相同类但不同 ID 的 div 元素。在每个 div 内,我都有一个段落元素和一个 span 元素。 Span 具有相同的类但不同的 id。在跨度内,我使用 fa-times(close) 图标来关闭外部 div。如何用 JavaScript 做到这一点?
我尝试使用类名声明变量,但它返回一个 HTML 集合数组。但是,我可以通过定位数组内部的每个元素来隐藏父 div。但我知道这是错误的方法。
代码
function close() {
var clost = document.getElementsByClassName('span');
clost[0].parentElement.style.display = 'none';
}
<div class="div" id="div_1">
<p>Please Enter a Keyword</p>
<span class="span" onclick="close()" id="span_1">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="div" id="div_2">
<p>Enter your name</p>
<span class="span" onclick="close()" id="span_2">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="div" id="div_3">
<p>Enter your city</p>
<span class="span" onclick="close()" id="span_3">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="div" id="div_4">
<p>Enter your country</p>
<span class="span" onclick="close()" id="span_4">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>
错误:找不到未定义的父级
预期结果:所有 div 应在单击 fa 图标时单独关闭。”
最佳答案
首先,close
不能用作函数名称,因为您会遇到冲突...因此请将其更改为 closeDiv
等其他名称。
使用当前代码和普通 JS 执行此操作的最简单方法是将 this
作为参数包含在 closeDiv()
中,然后直接使用它。 .
(注意,我已将单词 Text
添加到每个 span
中,这样您实际上就有了可以点击的内容)
function closeDiv(spn) {
spn.parentNode.style.display = "none";
}
<div class="div" id="div_1">
<p>Please Enter a Keyword</p>
<span class="span" onclick="closeDiv(this)" id="span_1">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_2">
<p>Enter your name</p>
<span class="span" onclick="closeDiv(this)" id="span_2">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_3">
<p>Enter your city</p>
<span class="span" onclick="closeDiv(this)" id="span_3">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_4">
<p>Enter your country</p>
<span class="span" onclick="closeDiv(this)" id="span_4">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
如果您可以选择使用 jQuery,它会变得更简单......
$(function(){
$(".span").on("click", function(e) {
$(this).parent().hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div" id="div_1">
<p>Please Enter a Keyword</p>
<span class="span" id="span_1">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_2">
<p>Enter your name</p>
<span class="span" id="span_2">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_3">
<p>Enter your city</p>
<span class="span" id="span_3">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
<div class="div" id="div_4">
<p>Enter your country</p>
<span class="span" id="span_4">
<i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>
关于javascript - 如何使用 JavaScript 在单击子元素时关闭父 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57727259/