Question

我无法在完成整个点击事件过程后找到显示提醒或添加setTimeout的方法。由于我的图像很少，我点击它就改变了每个图像并且工作正常，但是我想在最后显示你点击了所有图像的警告框，最后会显示消息当所有图像都被点击时。

下面是我的HTML和jQuery代码：

＆＃13;

jQuery('.images .sho-img0').each(function(){
//alert("check");
jQuery(this).dblclick(function(){

if(jQuery(this).is(".sho-img-0")){
  jQuery(this).html('<img class="hole-img" src="images/trex-back-leg.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-1")){
  jQuery(this).html('<img class="hole-img" src="images/trex-tail.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-2")){
  jQuery(this).html('<img class="hole-img" src="images/trex-ribcage-spine.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-3")){
  jQuery(this).html('<img class="hole-img" src="images/trex-head-neck.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-4")){
  jQuery(this).html('<img class="hole-img" src="images/trex-arms.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-5")){
  jQuery(this).html('<img class="hole-img" src="images/trex-front-leg.png" alt="Dirt Hole" />');
}
else if(jQuery(this).is(".sho-img-none")){
  jQuery(this).html('No bone Found Here!');
  }
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
			<!--<img class="hole-img" src="images/dirt-hole.png" alt="Dirt Hole" />-->
			<div class="sho-img0 sho-img-3" style="top:20px; left:100px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-4" style="top:40px; right:80px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-5" style="top:50px; right:445px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>			
			<div class="sho-img0 sho-img-none" style="top:0px; right:200px;"><img class="shovel-img2" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-none" style="top:65px; right:300px;"><img class="shovel-img2" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-none" style="top:170px; left:200px;"><img class="shovel-img2" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-none" style="top:180px; right:80px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-0" style="top:160px; right:350px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-1" style="top:255px; right:265px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
			<div class="sho-img0 sho-img-2" style="top:320px; right:450px;"><img class="shovel-img" src="images/shovel2.png" alt="Shovel Image" /></div>
		</div>

＆＃13;

Answer 1

您可以在函数之前添加包含布尔值的对象，例如isClicked：

var  isClicked = {
    "shoImg1": false,
    "shoImg2": false,
    "shoImg3": false,
    "shoImg4": false,
    "shoImg5": false,
    "shoImgNone": false
};

请注意，您应该在

之前添加它

 jQuery('.images .sho-img0').each(function(){

在你的功能中：

if(jQuery(this).is(".sho-img-0")){
    jQuery(this).html('<img class="hole-img" src="images/trex-back-leg.png" alt="Dirt Hole" />'); 
    isClicked['shoImg0'] = true;
}

为每个点击处理程序

添加类似内容

最后：

if (isClicked['shoImg0'] && isClicked['shoImg1'] && isClicked['shoImg2'] && isClicked['shoImg3'] && isClicked['shoImg4'] && isClicked['shoImg5'] && isClicked['shoImgNone']) {
     alert('bla bla bla');
}

完成所有单击事件后添加setTimeout

1 个答案: