紙牌游戲拖放

Question

有人可以玩這個游戲並向我解釋為什么102行中的.correct.length類等於1？。 我在上面放了一個警告框來確認長度。 這是一個工作小提琴http://jsfiddle.net/6haMV/141/

 $(init); function init() { $('#element_1').data('number', 1).attr('id', 'card' + 1).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#element_2').data('number', 2).attr('id', 'card' + 2).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#element_3').data('number', 3).attr('id', 'card' + 3).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#element_4').data('number', 4).attr('id', 'card' + 4).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#element_5').data('number', 5).attr('id', 'card' + 5).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#element_6').data('number', 6).attr('id', 'card' + 6).draggable({ containment: '#content', stack: '#cardPile div', cursor: 'pointer', revert: true }); $('#slot_1').data('number', 1).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); $('#slot_2').data('number', 2).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); $('#slot_3').data('number', 3).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); $('#slot_4').data('number', 4).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); $('#slot_5').data('number', 5).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); $('#slot_6').data('number', 6).droppable({ accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop }); } var totalCards = $('#cardPile').children().length; var totalMatches = 0; function handleCardDrop(event, ui) { var slotNumber = $(this).data('number'); var cardNumber = ui.draggable.data('number'); if (slotNumber == cardNumber) { totalMatches++; ui.draggable.addClass('correct'); ui.draggable.draggable('disable'); alert("the .correct length is " + $(".correct").length); $(this).droppable('disable'); ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); ui.draggable.draggable('option', 'revert', false); } if (totalMatches == totalCards) { $('#basicModal').modal('show'); } } 

 @charset"utf-8"; /* CSS Document */ body { margin: 30px; font-family: Arial, Helvetica, sans-serif; line-height: 1.8em; color: #333; } #content { margin: 80px 70px; text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; } /* Header/footer boxes */ .wideBox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333; } .wideBox h1 { font-weight: bold; margin: 20px; color: #666; font-size: 1.5em; } #cardSlots { margin: 50px auto 0 auto; } #cardPile { margin: 0 auto; } #cardPile { width: 1200px; height: 120px; padding: 20px; } #cardSlots { width: 1200px; height: 1000px; padding: 20px; font-family: Arial, Helvetica, sans-serif; line-height: normal; } #cardSlots div, #cardPile div { float: left; width: 80px; height: 50px; padding: 10px; padding-bottom: 0; border: 1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; } #cardSlots div:first-child, #cardPile div:first-child { margin-left: 0; } #cardSlots div.hovered { background: #aaa; } #cardSlots div { border: 1px dashed #333; } #cardPile div { background: #fff; border: 1px solid #005575; color: #000; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 1.3; } #cardPile div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } #card1.correct { background: #5fcf80; color: #fff; } 

 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="content" class="content"> <!-- Modal --> <div id="cardPile"> <div id="element_1">Card 1</div> <div id="element_2">Card 2</div> <div id="element_3">Card 3</div> </div> <div id="cardSlots"> <div id="slot_1"></div> <div id="slot_2"></div> <div id="slot_3"></div> </div> </div> <!--Modal--> <div class="modal fade" id="textModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" style="text-align:center">Great Work!</h4> </div> <div class="modal-body">Everything was matched :)</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <a href="www.google.com"> <button type="button" class="btn btn-primary">Next</button> </a> </div> </div> </div> </div> 

Answer 1

代碼$（“。correct”）。length表示具有類選擇器的DOM上的元素數.correct。 當你丟棄一個盒子然后在一個元素上存在類時，當你丟棄2然后元素數量增加到2，依此類推....