无法检查div是否为淡出而未点击

时间:2015-02-04 09:32:57

标签: javascript jquery html css

伙计们我有一个div随机掉落在屏幕底部并且在我到达底部之前点击它会消失..所以我想计算到达底部并且没有点击的错过div的数量..这是我的代码

var ranInterval = 1000 + Math.floor((Math.random() * 7000) + 1);
window.setTimeout( CreateDiv, ranInterval ); 
function CreateDiv()
{
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 2000 + Math.floor((Math.random() *  5000) + 1);
    jQuery('<div class="droper1" id="droper1" onclick="myFunction1()"/>').css({top: 10, left: ranLeft1 }).
	    animate({top: "+=583px"}, 9000 ).fadeOut(500).appendTo('#container' );

}

$(document).on("click", ".droper1", function(){
   score++;
   jQuery(this).remove();
   document.getElementById("score").innerHTML = score;
  // checking if it is not clicked and fadeout increase the  missed variable 
});
<td>Missed Green Boxes :</td>
<td><label type="text" id="missed" name="missed"></td> 
  
<div id="container" class="container"></div>

1 个答案:

答案 0 :(得分:1)

以下是您问题的答案:http://jsfiddle.net/n3j1nupk/1/

var score = 0;
var misses = 0;
var ranInterval = 1000 + Math.floor((Math.random() * 1000) + 1);
window.setTimeout( CreateDiv, ranInterval ); 
function CreateDiv()
{

    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 2000 + Math.floor((Math.random() *  2000) + 1);
    jQuery('<div class="droper1" />').css({top: 10, left: ranLeft1 }).
    animate({top: "+=583px"}, 9000, 
        function() {
            if (!$(this).hasClass("clicked")) {
                misses++;
                document.getElementById("misses").innerHTML = "Misses: " + misses;
            }
        }).fadeOut(500).appendTo('#container' );
}

$(document).on("click", ".droper1", function(){
   score++;
    $(this).addClass("clicked");
   jQuery(this).remove();
    document.getElementById("score").innerHTML = "Score: " + score;
  // checking if it is not clicked and fadeout increase the  missed variable 
});

单击正方形时,会向其中添加一个类。当它到达底部时,检查是否有该类,如果不是,则意味着它没有被点击。 请注意,您的代码还有其他不起作用的内容(只有一个多维数据集生成),但这超出了此问题的范围。