jquery draggable和droppable启动和停止功能

Question

有人能告诉我为什么第二个if语句条件得到满足。

这是代码

$("#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');

});

这是可以放弃的

   $("#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
图片

    <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>

我使用警告框检查了.correct和.drop的长度，正确的长度为8，.drop的长度为5.但是当我拖动图像并将其删除时，第二个if语句正在工作，它没有意义。

这是完整的代码。

 $(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

第二个条件得到满足，因为计数器初始化为60，大于40，当你将所有div放入槽中时，具有“正确”类的元素的数量将等于具有“drop”类的元素的数量。 即3