jquery draggable和droppable启动和停止功能

Question

Can someone tell me why is this second if statement condition is met.

here is the code

$("#car").draggable({
 start: function(event, ui) {
 if (!done) return false;
 },
 stop: function(event, ui) {
 if (counter >= 40 && $(".correct").length == $(".drop").length) {
 setTimeout(function() {
  $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');

});

this is the droppable

   $("#carDrop").droppable({
    accept: "#car",
    drop: function(event, ui) {
        if(ui.draggable.is("#car")){
            $(this).addClass("correct");

            ui.draggable.fadeOut(500);
            $(this).fadeOut(500,function(){
            });
        }
    }
   });

HTML
Picture

    <div id="soccer"><p><img src="web/soccer.png"></p></div>
    <div id="boat"><p><img src="web/boat.png"></p></div>
    <div id="car"><p><img src="web/car.png"></p></div>

</div> 
 <div class="wrap2" >

    <div id="carDrop" class="drop ui-droppable"><p><img src="web/car.png" ></p></div>
    <div id="soccerDrop" class="drop ui-droppable"><p><img src="web/soccer.png" ></p></div>
     <div id="boatDrop" class="drop ui-droppable"><p><img src="web/boat.png" ></p></div>
    </div>
</div>
</div>

I checked the length of .correct and .drop using alert box and the length of correct is 8 and the length of .drop is 5. But when i drag an image and drop it it the second if statement is working, it doesnt make sense.

Here is the full code.

 $(window).load(function(){ //---------------------------toggle----------------------- $( ".picture" ).click(function() { $( "#picture" ).toggle(); }); //========================================================== var timer; var done = true; $("#startClock").click(function() { var counter = 60; var winner = 0; var winners = 0; var winnercountry= 0; var finish= 0; //===============================================CAR DRAGGABLE=================== $("#car, #boat, #soccer").draggable({ start: function(event, ui) { if (!done) return false; }, stop: function(event, ui) { if (counter >= 40 && $(".correct").length == $(".drop").length) { setTimeout(function() { $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#picture" ).hide( "fold", 500 ); $(".picture").toggleClass('disabled'); $( ".numberbutton" ).click(function() { $( "#numbercontent" ).toggle(); }); counter = 61; }, 500); winner=3; finish= 1; } else if (counter >= 30 && $(".correct").length == $(".drop").length) { setTimeout(function() { $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#picture" ).hide( "fold", 500 ); $(".picture").toggleClass('disabled'); $( ".numberbutton" ).click(function() { $( "#numbercontent" ).toggle(); }); counter = 61; }, 500); winner=2; finish =1; } else if (counter >= 1 && $(".correct").length == $(".drop").length) { setTimeout(function() { $('#win').text(winner+' '+'star'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#picture" ).hide( "fold", 500 ); $(".picture").toggleClass('disabled'); $( ".numberbutton" ).click(function() { $( "#numbercontent" ).toggle(); }); counter = 61; }, 500); winner=1; finish =1; } } }); //=========================================CAR DRAGGABLE END========================== //==========================================BOAT DRAGGABLE================================= $("#two, #five, #six").draggable({ start: function(event, ui) { if (!done) return false; }, stop: function(event, ui) { if (counter >= 40 && $(".correct1").length == $(".drop").length) { setTimeout(function() { $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#numbercontent" ).hide( "fold", 500 ); $(".numberbutton").toggleClass('disabled'); $( ".countrybutton" ).click(function() { $( "#countrycontent").toggle(); }); counter = 61; }, 500); winners=3; finish =2; } else if (counter >= 30 && $(".correct1").length == $(".drop").length) { setTimeout(function() { $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#numbercontent" ).hide( "fold", 500 ); $(".numberbutton").toggleClass('disabled'); $( ".countrybutton" ).click(function() { $( "#countrycontent" ).toggle(); }); counter = 61; }, 500); winners=2; finish =2; } else if (counter >= 1 && $(".correct1").length == $(".drop").length) { setTimeout(function() { $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#numbercontent" ).hide( "fold", 500 ); $(".numberbutton").toggleClass('disabled'); $( ".countrybutton" ).click(function() { $( "#countrycontent" ).toggle(); }); counter = 61; }, 500); winners=1; finish =2; } } }); $("#canada, #japan, #china").draggable({ start: function(event, ui) { if (!done) return false; }, stop: function(event, ui) { if (counter >= 40 && $(".correct2").length == $(".drop").length) { setTimeout(function() { $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#countrycontent" ).hide( "fold", 500 ); $(".countrybutton").toggleClass('disabled'); clearInterval(timer); $("<div title='You did it!'>"+'Total Score:'+ ' '+ total+' Star(s)'+'<br>'+'<a href="Midterm.html">Play Again</a>'+"</div>").dialog(); }, 500); winnercountry=3; total = winnercountry + winners + winner; } else if (counter >= 30 && $(".correct2").length == $(".drop").length) { setTimeout(function() { $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#countrycontent" ).hide( "fold", 500 ); $(".countrybutton").toggleClass('disabled'); clearInterval(timer); $("<div title='You did it!'>"+'Total Score:'+ ' '+ total+' Star(s)'+'<br>'+'<a href="Midterm.html">Play Again</a>'+"</div>").dialog(); }, 500); winnercountry=2; total = winnercountry + winners + winner; } else if (counter >= 1 && $(".correct2").length == $(".drop").length) { setTimeout(function() { $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds'); $( "#countrycontent" ).hide( "fold", 500 ); $(".countrybutton").toggleClass('disabled'); clearInterval(timer); $("<div title='You did it!'>"+'Total Score:'+ ' '+ total+' Star(s)'+'<br>'+'<a href="Midterm.html">Play Again</a>'+"</div>").dialog(); }, 500); winnercountry=1; total = winnercountry + winners + winner; } } }); if (!timer) { timer = setInterval(function() { counter--; if (counter >= 0) { $("#count").text(counter); } if (counter === 0 && winner === 0 && finish === 0) { $('#win').text(winner+' '+'Star earned'); $( "#picture" ).hide( "fold", 500 ); $(".picture").addClass('disabled'); $( ".numberbutton" ).click(function() { $( "#numbercontent" ).toggle(); }); counter=60; winner=0; finish = 1; } if (counter >= 0) { $("#count").text(counter); } if (counter === 0 && winners === 0 && finish === 1) { $('#win1').text(winners+' '+'Star earned'); $( "#numbercontent" ).hide( "fold", 500 ); $(".numberbutton").addClass('disabled'); $( ".countrybutton" ).click(function() { $( "#countrycontent" ).toggle(); }); counter=60; winners=0; finish = 2; } if (counter === 0 && winnercountry === 0 && finish === 2) { $('#winnercountry').text(winnercountry+' '+'Star earned'); $( "#countrycontent" ).hide( "fold", 500 ); $(".countrybutton").addClass('disabled'); $("<div title='Oh no!'>"+'Total Score:'+ ' '+ total+' Star(s)'+'<br>'+'<a href="Midterm.html">Play Again</a>'+"</div>").dialog(); counter=60; clearInterval(timer); } total = winnercountry + winners + winner; }, 1000); } }); //==================================================END SOCCER DRAGGABLE================================ //===================================================CAR DROPPABLE================================ $("#carDrop").droppable({ accept: "#car", drop: function(event, ui) { if(ui.draggable.is("#car")){ $(this).addClass("correct"); ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ }); } } }); //===================================================CAR DROPPABLE END================================ //===================================================BOAT DROPPABLE================================ $("#boatDrop").droppable({ accept: "#boat", drop: function(event, ui) { if(ui.draggable.is("#boat")){ $(this).addClass("correct").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); //===================================================BOAT DROPPABLE END================================ //===================================================SOCCER DROPPABLE================================ $("#soccerDrop").droppable({ accept: "#soccer", drop: function(event, ui) { if(ui.draggable.is("#soccer")){ $(this).addClass("correct").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#twoDrop").droppable({ accept: "#two", drop: function(event, ui) { if(ui.draggable.is("#two")){ $(this).addClass("correct1").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#fiveDrop").droppable({ accept: "#five", drop: function(event, ui) { if(ui.draggable.is("#five")){ $(this).addClass("correct1").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#sixDrop").droppable({ accept: "#six", drop: function(event, ui) { if(ui.draggable.is("#six")){ $(this).addClass("correct1").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#canadaDrop").droppable({ accept: "#canada", drop: function(event, ui) { if(ui.draggable.is("#canada")){ $(this).addClass("correct2").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#chinaDrop").droppable({ accept: "#china", drop: function(event, ui) { if(ui.draggable.is("#china")){ $(this).addClass("correct2").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); $("#japanDrop").droppable({ accept: "#japan", drop: function(event, ui) { if(ui.draggable.is("#japan")){ $(this).addClass("correct2").find("p").html("correct!"); done = false; ui.draggable.fadeOut(500); $(this).fadeOut(500,function(){ done = true; }); } } }); //===================================================SOCCER DROPPABLE END================================ //=============================================================END OF PICTURE GAME============================================================================== //=============================================================END OF PICTURE GAME============================================================================== }); 

 .wrap{ width: 40%; float: left; height: 500px; margin-right: 70px; margin-top: 10px; } .wrap2{ width: 40%; float: left; height: 500px; margin-top: 10px; } #startClock{ background-color: #f1666a; padding: 10px; } a{ text-decoration: none; color: white; } img{ width: 100px; } #win, #win1, #winnercountry{ font-weight: bold; font: 100px; color: white; margin-bottom: 50px; } #picture, #numbercontent, #countrycontent{ width: 100%; height: 400px; margin: 0 auto; text-align: center; display: none; } .picture, .numberbutton, .countrybutton{ background-color: #f1666a; padding: 10px; } #container{ width: 30%; background-color: #f1666a; float: left; } #twoDrop img, #sixDrop img{ width: 160px; height: 120px; } #fiveDrop img{ width: 160px; height: 160px; } #scorecontainer { width: 100%; height: 150px; text-align: center; } #win, #win1, #winnercountry{ float: left; width: 30%; } .disabled { pointer-events: none; cursor: default; background-color: gray; } body{ background-color: #a2d5e8; } </style> 

 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script> <body> <header id="header"> <div id="content" class="row-fluid"> <div class="span6 pull-right align-right white" style="max-width: 540px;"> <div style="display: block;"> <a id="startClock" class="blink" href="javascript:toggle();" style="display: inline-block;" >Start Game</a> <span id="count">60</span> seconds </div> </div> <div style="clear: both;"></div> </div> </header> <!--// END CONTENT //--> <br><br> <div id="scorecontainer"> <div id="win">Level 1 Score</div> <div id="win1">Level 2 Score</div> <div id="winnercountry">Level 3 Score</div> </div> <div id="container"> <a href="#" class="picture">Picture</a> <div id="picture"> <div class="wrap" > Drag Me <div id="soccer"><p><img src="web/soccer.png"></p></div> <div id="boat"><p><img src="web/boat.png"></p></div> <div id="car"><p><img src="web/car.png"></p></div> </div> <!--// END WRAPPER //--> <div class="wrap2" > Drop me <div id="carDrop" class="drop ui-droppable"><p><img src="web/car.png" ></p></div> <div id="soccerDrop" class="drop ui-droppable"><p><img src="web/soccer.png" ></p></div> <div id="boatDrop" class="drop ui-droppable"><p><img src="web/boat.png" ></p></div> </div> </div> </div> <!--========================================Container for Number game============================================--> <div id="container"> <a href="#" class="numberbutton">Numbers</a> <div id="numbercontent"> <div class="wrap" > Drag Me <div id="two"><p><img src="web/0.png"></p></div> <div id="five"><p><img src="web/two.png"></p></div> <div id="six"><p><img src="web/six.png"></p></div> </div> <!--// END WRAPPER //--> <div class="wrap2" > Drop me <div id="twoDrop"><p><img src="web/44.png" ></p></div> <div id="fiveDrop"><p><img src="web/5.png" ></p></div> <div id="sixDrop"><p><img src="web/3.png" ></p></div> </div> </div> </div> <div id="container"> <a href="#" class="countrybutton">Country</a> <div id="countrycontent"> <div class="wrap" > Drag Me <div id="china"><p>China</p></div> <div id="japan"><p>Japan</p></div> <div id="canada"><p>Canada</p></div> </div> <!--// END WRAPPER //--> <div class="wrap2" > Drop me <div id="japanDrop"><p><img src="web/japan.png" ></p></div> <div id="canadaDrop"><p><img src="web/canada.png" ></p></div> <div id="chinaDrop"><p><img src="web/china.png" ></p></div> </div> </div> </div> </body> 

Answer 1

我从你的小提琴中看到，计数器初始化为60.这使得你的if语句的第一部分为真（ counter >= 40 ），这就是为什么它应该正常工作。

Answer 2

The second condition is met because counter is initialized to 60 which is greater than 40 and when you drop all the div into the slots the count of elements having the class "correct" will be equal to the count of elements having the class "drop ". ie 3