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语句正在工作，它没有意义。

这是完整的代码。

＆＃13;

＆＃13;

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


});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

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