[英]Hide a div onclick in pure javascript
I'd like to know how to hide a div
onclick
in pure javascript without using something like getElementById
. 我想知道如何在纯JavaScript中隐藏
div
onclick
而不使用getElementById
东西。
The goal for this is to scale and work if the number of divs
is unknown. 此目标是在
divs
数量未知的情况下扩展和工作。
Here is the current pattern that only hides the 1st div
: 这是仅隐藏1st
div
的当前模式:
document.getElementById('msg0').addEventListener('click',function(e){
document.getElementById('msg0').style.display = 'none';
});
And here are the sample divs
: 这是示例
divs
:
<div class="alert alert-info" id="msg0">
<button data-dismiss="alert" class="close">
×
</button>
<i class="fa fa-check-circle"></i>
Three credits remain in your account.
</div>
<div class="alert alert-success" id="msg1">
<button data-dismiss="alert" class="close">
×
</button>
<i class="fa fa-check-circle"></i>
Profile details updated.
</div>
<div class="alert alert-warning" id="msg2">
<button data-dismiss="alert" class="close">
×
</button>
<i class="fa fa-check-circle"></i>
Your account expires in three days.
</div>
<div class="alert alert-danger" id="msg3">
<button data-dismiss="alert" class="close">
×
</button>
<i class="fa fa-check-circle"></i>
Document deleted.
</div>
Use event delegation. 使用事件委托。 Only one click handler is set and works with alerts dynamically added.
仅设置了一个单击处理程序,并且可以动态添加警报。
document.addEventListener('click', function (event) {
var alertElement = findUpTag(event.target, '.alert');
if (alertElement) {
alertElement.style.display = 'none';
}
});
function findUpTag(el, selector) {
if (el.matches(selector)) {
return el;
}
while (el.parentNode) {
el = el.parentNode;
if (el.matches && el.matches(selector)) {
return el;
}
}
return null;
}
DEMO: http://jsfiddle.net/ht2qp6zj/3/ 演示: http : //jsfiddle.net/ht2qp6zj/3/
First you need to add one common class for all the div elements that need to implement this same functionality. 首先,您需要为所有需要实现相同功能的div元素添加一个通用类。 For example lets name that class 'hideable':
例如,让该类命名为“ hideable”:
/// Html
<div class='hideable'></div>
// Javascript
var elements = document.getElementsByClassName('hideable');
for(var i=0; i<elements.length; i++)
{
var element = elements[i];
element.addEventListener('click', onClick);
}
function onClick(event){
event.target.style.display = 'none';
}
Something like this would suffice. 像这样的东西就足够了。 This will hide only the div that is clicked on.
这将仅隐藏被单击的div。 I will explain how this works if you make a request.
如果您提出要求,我将解释其工作原理。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).hide();
});
});
</script>
<div>
one
</div>
<div>
two
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.