单击鼠标时连续关闭div

我对JavaScript和jQuery相对较新，不知道从哪里开始，或者是否可能。但是，我在屏幕上有三个"浮动"div，我希望能够通过单击身体上的任意位置逐个删除(显示：无(。任何帮助不胜感激！

这是其中一个"浮动"div的代码(所有三个具有相同的格式，只是ID不同(。

<div id="yellow-draggable" class="div">
<div class="arrow">
<img class="white-arrow-yellow" src="img/whiteArrow.svg">
</div>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster Recovery</p>
<p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a> 
</div>
</a>
<div class="graph">
<img src="img/graphFiveDR.svg">
</div>
</div>

// this is listen for click event of full body
$("body").on("click", function() {
// This will hide first visible div on click of body. Let's add animation while hiding so pass face out time.
$('.div:visible').first().hide(200);
})

.div{
width: 50%;
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="yellow-draggable1" class="div">
<div class="arrow">
<img class="white-arrow-yellow" src="img/whiteArrow.svg">
</div>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster1 Recovery</p>
<p class="hover-copy hover-yellow">3% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<div class="graph">
<img src="img/graphFiveDR.svg">
</div>
</div>
<div id="yellow-draggable2" class="div">
<div class="arrow">
<img class="white-arrow-yellow" src="img/whiteArrow.svg">
</div>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster2 Recovery</p>
<p class="hover-copy hover-yellow">4% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<div class="graph">
<img src="img/graphFiveDR.svg">
</div>
</div>
<div id="yellow-draggable3" class="div">
<div class="arrow">
<img class="white-arrow-yellow" src="img/whiteArrow.svg">
</div>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster3 Recovery</p>
<p class="hover-copy hover-yellow">5% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<div class="graph">
<img src="img/graphFiveDR.svg">
</div>
</div>

我想如果它总是与你的情况相同，你可以有一个计数器。

let counter = 0;
$('body').on('click', function() {
switch(counter) {
case 1:
// set style display none on second div
break;
case 2:
// set style display none on third div
break;
default:
// set style display none on first div
}
}

我没有测试过代码，但你应该能够做这样的事情。或者使用 Rémi.M 提到的 $('taget'(.hide(( 函数。

我测试了它并且工作正常：

<script type="text/javascript">
$('body').click(function(e){
$('.arrow').hide(200);
$('.box').hide(200);
$('.graph').hide(200);
});
</script>

这是最简单的单行解决方案，每次单击隐藏一个div。单击正文上的任意位置。

搜索firstvisible.box并hide它。

$(document).on('click', 'body', function() {
$('div.box:visible:first').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="yellow-draggable" class="div">
<div class="arrow">
<img class="white-arrow-yellow" src="img/whiteArrow.svg">
</div>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster Recovery</p>
<p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster Recovery</p>
<p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<a href="sections/dr.html">
<div class="box yellow yellow-box">
<p class="hover-title">Disaster Recovery</p>
<p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
<a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
</div>
</a>
<div class="graph">
<img src="img/graphFiveDR.svg">
</div>
</div>
</body>

我有一个简单的演示给你，请检查代码片段

$(document).on('click', function(e){
	var $div = $('div');
var index = 0;
var timer = window.setInterval(function(){
if(index < $div.length) {
$div.eq(index++).hide(600);
} else {
window.clearInterval(timer);
}
}, 500);
});

.one {
width: 200px;
height: 200px;
background: #00A321;
margin: 15px;
float: left;
}

<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

你也可以试试这个 -

$(document).ready(function(){
$('body').on('click','div',function()
{
if($(this).attr('id') =='yellowdraggable')
$(this).attr('style','display: none');
event.preventDefault();
})

您也可以使用 hide(( 方法简单地隐藏div。

$('body').click(function() {
$('#yellow-draggable').hide();
});

希望它能帮助你。

相关内容

最新更新

热门标签：